How to ADD/CHANGE HTML using JavaScript 🛠️

#JavaScript #html #tutorial
00:00:00 setup
00:01:10 h1 element
00:09:32 list items
// STEP 1 CREATE THE ELEMENT
const newH1 = document.createElement("h1");
// STEP 2 ADD ATTRIBUTES/PROPERTIES
newH1.textContent = "I like pizza!";
newH1.id = "myH1";
newH1.style.color = "tomato";
newH1.style.textAlign = "center";
// STEP 3 APPEND ELEMENT TO DOM
document.body.append(newH1);
// document.body.prepend(newH1);
// document.getElementById("box1").append(newH1);
// document.getElementById("box1").prepend(newH1);
// const box4 = document.getElementById("box4");
// document.body.insertBefore(newH1, box4);
// const boxes = document.querySelectorAll(".box");
// document.body.insertBefore(newH1, boxes[0]);
// REMOVE HTML ELEMENT
// document.body.removeChild(newH1);
// document.getElementById("box1").removeChild(newH1);

[@BroCodez]

// ---------- EXAMPLE 1 h1 ELEMENT ----------
// STEP 1 CREATE THE ELEMENT
const newH1 = document.createElement("h1");
// STEP 2 ADD ATTRIBUTES/PROPERTIES
newH1.textContent = "I like pizza!";
newH1.id = "myH1";
newH1.style.color = "tomato";
newH1.style.textAlign = "center";
// STEP 3 APPEND ELEMENT TO DOM
document.body.append(newH1);
// document.body.prepend(newH1);
// document.getElementById("box1").append(newH1);
// document.getElementById("box1").prepend(newH1);
// const box4 = document.getElementById("box4");
// document.body.insertBefore(newH1, box4);
// const boxes = document.querySelectorAll(".box");
// document.body.insertBefore(newH1, boxes[0]);
// REMOVE HTML ELEMENT
// document.body.removeChild(newH1);
// document.getElementById("box1").removeChild(newH1);
// ---------- EXAMPLE 2 li ELEMENT ----------
// STEP 1 CREATE THE ELEMENT
const newListItem = document.createElement("li");
// STEP 2 ADD ATTRIBUTES/PROPERTIES
newListItem.textContent = "coconut";
newListItem.id = "coconut";
newListItem.style.fontWeight = "bold";
newListItem.style.backgroundColor = "lightgreen";
// STEP 3 APPEND ELEMENT TO DOM
document.body.append(newListItem);
// document.body.prepend(newListItem);
// document.getElementById("fruits").append(newListItem);
// document.getElementById("fruits").prepend(newListItem);
// const banana = document.getElementById("banana");
// document.getElementById("fruits").insertBefore(newListItem, banana);
// const listItems = document.querySelectorAll("#fruits li");
// document.getElementById("fruits").insertBefore(newListItem, listItems[1]);
// REMOVE HTML ELEMENT
// document.body.removeChild(newLink);
// document.getElementById("fruits").removeChild(newListItem);

[@acecool1715]

BroCode, i have been followed your channel for like 4 years now, i just want to say Thank you, hope you are financially stable to keep being this way and helping providing knowledge to people.

[@danielgago-sk]

I know these functions, but I still like to watch it, how great it is explained, and sometimes I learn some detail... it's perfect, thank you

[@chrish.44]

You are a lifesaver man. Just now you're appreciated.

[@nastyroid]

I was searching for this kind of tutorial. Tysm!

[@unknown-rc1vp]

coolest dude on RUclips!! I have learnt so much

[@defnotdev1]

I am almost done with this course, today is day 4. Thank you bro

[@thangavel_st]

Master ✨

[@Dogefosters]

😮 amazing channel thank you

[@seawinn]

ty babe

[@shinydoritos0159]

Ayo ? 🤨📸

[@GuyFromTiktokLOL]

your voice hasn't changed in 2 years

[@rifatmunna]

can u just next.js 14 video