0Pricing
Frontend Academy · Lesson

Creating and Appending Elements

Use createElement, setAttribute, append, and remove to build and modify the DOM structure dynamically.

createElement

document.createElement(tagName) creates a new element in memory — it's not in the DOM yet. You then set its properties and append it to the tree.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append and appendChild

parent.append(child) adds a node or string to the end of parent's children. appendChild is the older equivalent, but append is more flexible — it accepts multiple nodes and strings.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

All lessons in this course

  1. querySelector and querySelectorAll
  2. addEventListener and Event Object
  3. Changing Content: textContent innerHTML classList
  4. Creating and Appending Elements
← Back to Frontend Academy