DOM Manipulation

innerHTML & textContent

innerHTML gets or sets HTML content (parsed as HTML). textContent gets or sets plain text only.

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

div.textContent = "Hello World";
console.log(div.textContent);

div.innerHTML = "<strong>Bold text</strong>";
console.log(div.innerHTML);

Try it Yourself →

Manipulating Styles

Use the style property to change inline CSS. Property names use camelCase.

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

box.style.backgroundColor = "blue";
box.style.color = "white";
box.style.padding = "20px";
box.style.borderRadius = "8px";
box.style.fontSize = "18px";

Try it Yourself →

createElement & appendChild

Create new elements dynamically and insert them into the DOM.

const list = document.querySelector("#todoList");
const newItem = document.createElement("li");
newItem.textContent = "Learn DOM manipulation";
newItem.classList.add("todo-item");

list.appendChild(newItem);

const firstItem = document.createElement("li");
firstItem.textContent = "First item";
list.insertBefore(firstItem, list.firstChild);

Try it Yourself →

← Previous DOM Events

Next → DOM Traversal