Adding Elements to the DOM

JavaScript can create brand new HTML elements and add them to the page dynamically.

Creating Elements

// Create a new element
let newParagraph = document.createElement("p");
newParagraph.textContent = "This paragraph was created by JavaScript!";
newParagraph.classList.add("dynamic");

// Create a link
let newLink = document.createElement("a");
newLink.href = "https://example.com";
newLink.textContent = "Visit Example";
newLink.setAttribute("target", "_blank");

Adding to the Page

let container = document.querySelector(".container");

// Add at the end
container.appendChild(newParagraph);

// Add at the beginning
container.prepend(newParagraph);

// Insert before a specific element
let reference = document.querySelector(".reference");
container.insertBefore(newParagraph, reference);

Modern Insertion Methods

let target = document.querySelector(".target");

// Insert adjacent to target
target.before(newElement);        // Before target
target.after(newElement);         // After target
target.prepend(newElement);       // First child of target
target.append(newElement);        // Last child of target

Building a List Dynamically

let fruits = ["Apple", "Banana", "Cherry", "Date"];
let list = document.createElement("ul");

fruits.forEach(function(fruit) {
    let item = document.createElement("li");
    item.textContent = fruit;
    list.appendChild(item);
});

document.body.appendChild(list);

insertAdjacentHTML

let container = document.querySelector(".container");

// Insert HTML string at specific positions
container.insertAdjacentHTML("beforebegin", "<p>Before</p>");
container.insertAdjacentHTML("afterbegin", "<p>First child</p>");
container.insertAdjacentHTML("beforeend", "<p>Last child</p>");
container.insertAdjacentHTML("afterend", "<p>After</p>");