How to Manipulate the DOM

DOM manipulation lets you create new elements, change existing ones, move things around, and remove them entirely, all from JavaScript.

I. Create an element

document.createElement(tagName) creates a new element in memory. It does not appear on the page until you insert it.

const li = document.createElement("li");

II. Set text content

Use .textContent to set plain text. Use .innerHTML only when you need to insert HTML markup, and only with trusted content.

const li = document.createElement("li");
li.textContent = "New item";

Avoid setting .innerHTML with user-provided content. It can introduce XSS vulnerabilities. Use .textContent for plain text.

III. Insert elements

append() and prepend()

append() inserts a node (or string) at the end of a parent’s children. prepend() inserts at the beginning.

<ul class="items">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
</ul>

const ul = document.querySelector(".items");

const newLast = document.createElement("li");
newLast.textContent = "Item 3";
ul.append(newLast); // added at the end

const newFirst = document.createElement("li");
newFirst.textContent = "Item 0";
ul.prepend(newFirst); // added at the start

Result:

<ul class="items">
  <li>Item 0</li>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li>Item 3</li>
</ul>

appendChild() and insertBefore()

Older equivalents you will see in existing code:

ul.appendChild(newLast); // same as ul.append(newLast)

// insertBefore(newNode, referenceNode)
ul.insertBefore(newFirst, ul.firstElementChild);

Prefer append() and prepend() in new code. They accept multiple arguments and plain strings.

IV. Replace an element

const ul = document.querySelector(".items");

const replacement = document.createElement("li");
replacement.textContent = "Replaced item";

ul.replaceChild(replacement, ul.children[1]); // replaces Item 2

V. Remove an element

const ul = document.querySelector(".items");

ul.firstElementChild.remove(); // removes Item 1
ul.lastElementChild.remove();  // removes the last item
ul.remove();                   // removes the entire list

VI. Add inline styles

const div = document.querySelector("div");

div.style.backgroundColor = "blue";
div.style.border = "2px solid black";
div.style.width = "80px";
div.style.height = "50px";

CSS property names use camelCase in JavaScript (backgroundColor, not background-color).

VII. Working with classes

Prefer class manipulation over inline styles. It keeps styling in CSS where it belongs.

const div = document.querySelector("div");

div.classList.add("active");           // add a class
div.classList.remove("hidden");        // remove a class
div.classList.toggle("open");          // add if absent, remove if present
div.classList.contains("active");      // true/false
div.classList.replace("old", "new");   // swap a class