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);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";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);