add/change HTML elements

Creating new HTML elements involves using the document.createElement() method to generate an HTML element object. You can then customize and manipulate this element, set its attributes and content, and append it to the DOM (Document Object Model) to become part of your webpage. This dynamic creation of HTML elements is commonly used for adding or modifying content on a web page programmatically, allowing you to build interactive and responsive web applications.

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


let listItem1 = document.createElement("li");
listItem1.textContent = "hat";
listItem1.style.color = "#9e85c4";
itemList.prepend(listItem1);

itemList:

tshirt
jeans


let listItem2 = document.createElement("li");
listItem2.textContent = "shoes";
listItem2.style.color = "#9e85c4";
itemList.append(listItem2);


const content = document.querySelector(".content");
const newElement = document.createElement("p");
newElement.textContent = "new paragraph";
newElement.style.color = "#c83c4c";
newElement.style.fontSize = "1.5rem";
content.append(newElement);