Creating and Inserting Elements

The previous lessons showed how to modify elements that already exist in the HTML. Now you will create elements from scratch in JavaScript and insert them into the page.

document.createElement()

createElement creates a new element node in memory. It is not on the page yet — it is just an object:

const banner = document.createElement('div');

After creating it, configure the element before inserting it:

banner.className = 'promo-banner';
banner.textContent = 'Limited spots available — book your tour today!';
banner.setAttribute('role', 'alert');

Inserting with appendChild and append

parentElement.appendChild(child) inserts the element as the last child of a parent:

const main = document.querySelector('main');
main.appendChild(banner);

parentElement.append(child) is the modern version — it can accept multiple nodes and plain strings:

main.append(banner, 'Some text', anotherElement);

parentElement.prepend(child) inserts as the first child:

main.prepend(banner);  // adds before all existing children

insertAdjacentHTML

insertAdjacentHTML(position, html) inserts an HTML string at one of four positions relative to an element:

const section = document.querySelector('.featured-tours');

section.insertAdjacentHTML('beforebegin', '<div class="promo-banner">...</div>');
section.insertAdjacentHTML('afterbegin', '<p>Featured today:</p>');
section.insertAdjacentHTML('beforeend', '<p>More tours coming soon.</p>');
section.insertAdjacentHTML('afterend', '<footer class="section-footer">...</footer>');

Position	Where it inserts
beforebegin	Before the element itself
afterbegin	Inside, before the first child
beforeend	Inside, after the last child
afterend	After the element itself

insertAdjacentHTML is concise for inserting HTML strings you control. Remember: same XSS rules apply as innerHTML — only use with trusted content.

element.remove()

Remove an element from the DOM entirely:

const banner = document.querySelector('.promo-banner');
if (banner) {
  banner.remove();
}

After .remove(), the element is gone from the page. If you still hold a reference to it in a variable, the object persists in memory — it is just detached from the tree.

Practical pattern: create, configure, insert

function createPromoBanner(message) {
  const banner = document.createElement('div');
  banner.className = 'promo-banner';
  banner.textContent = message;
  return banner;
}

const section = document.querySelector('.featured-tours');
if (section) {
  const banner = createPromoBanner('Limited spots available — book your tour today!');
  section.prepend(banner);
}

This pattern — create in a function, insert at the call site — keeps the creation logic reusable and the insertion point explicit.

Exercise

On the STO site, insert a promotional banner before the tours section:

// Create and configure the banner
const banner = document.createElement('div');
banner.className = 'promo-banner';
banner.textContent = 'Limited spots available — book your tour today!';

// Insert it before the tours section
const toursSection = document.querySelector('.featured-tours');
if (toursSection) {
  toursSection.insertAdjacentHTML('beforebegin', `
    <div class="promo-banner">Limited spots available — book your tour today!</div>
  `);
}

Verify the banner appears in the browser. Then select and remove it with .remove(). Finally, try using prepend to insert it as the first child of main instead.

Recap

• document.createElement(tag) creates a new element in memory. Configure it before inserting.
• parentElement.appendChild(child) inserts as the last child. append() is the modern version that accepts strings and multiple nodes.
• prepend(child) inserts as the first child.
• insertAdjacentHTML(position, html) inserts HTML at beforebegin, afterbegin, beforeend, or afterend — concise for inserting markup strings.
• element.remove() removes an element from the DOM.
• Same XSS rules as innerHTML: only use insertAdjacentHTML with content you control.