What is createElement()?
- It is used to create a new HTML element using JavaScript.
- Creating an element is a multi-step workflow because the element is added in JavaScript memory, not on the screen.
- It consist of 3 step.
- Create element - let par = document.createElement("p")
- Add content - par.innerText = "Papaya"
- Add to DOM - document.body.appendChild(par)
<body>
<p class="box">Apple</p>
<p class="box">Orange</p>
<p class="box">Banana</p>
<script>
let par = document.createElement("p")
par.innerText = "Papaya"
document.body.appendChild(par)
</script>
</body>
<body>
<p class="box">Apple</p>
<p class="box">Orange</p>
<p class="box">Banana</p>
<button id="bttn">Add Paragraph</button>
<script>
const btn = document.getElementById("bttn");
btn.addEventListener("click",()=>
{
let par = document.createElement("p") ;
par.innerText = "New Paragraph Added";
par.style.color ="red";
par.setAttribute("class","paragraph")
document.body.appendChild(par)
console.log(par)
} )
</script>
</body>
Append in Specific Element:
<body>
<p class="box">Apple</p>
<div id="container"></div>
<button id="bttn">Add Paragraph</button>
<script>
let par = document.createElement("p")
par.innerText ="Hi";
const cont = document.getElementById("container")
cont.appendChild(par);
console.log(par)
</script>
</body>
Output :
Example Dynamic list:
<body>
<p class="box">Apple</p>
<script>
let lst = document.createElement("ul");
for(let i=1; i<=3; i++){
let li = document.createElement("li");
li.innerText ="Item "+i;
lst.appendChild(li);
}
document.body.appendChild(lst);
</script>
</body>
What is remove()?
- It is used to delete an element from the DOM.
- It removes the element completely from the page.
<body>
<p id="par">Hello</p>
<button id="btn">Remove</button>
<script>
const para = document.getElementById("par")
const bttn = document.getElementById("btn")
bttn.addEventListener("click",()=> para.remove());
</script>
</body>
<script>
const par = document.createElement("p");
par.innerText = "Hello";
document.body.appendChild(par);
setTimeout(()=>par.remove(),3000 )
</script>
<body>
<p class="box">Apple</p>
<p class="box">Orange</p>
<p class="box">Banana</p>
<script>
const parL = document.querySelectorAll(".box")
parL.forEach((par,indx)=>{setInterval(()=>par.remove(),(indx+1)*3000)})
</script>
</body>
</html>
What is removeChild()?
- It is used to remove a child element from its parent.
<body>
<div id="box">
<p id="txt">Apple</p>
</div>
<button id="btn">Remove</button>
<script>
const btn = document.getElementById("btn");
const prnt = document.getElementById("box");
const chld = document.getElementById("txt");
btn.addEventListener("click",()=>prnt.removeChild(chld));
</script>
</body>
<body>
<button id="add">Add fruits</button>
<button id="remove">Remove One</button>
<script>
const p = document.createElement("lu");
const ad = document.getElementById("add");
const rm = document.getElementById("remove");
document.body.appendChild(p);
const arr = ["Apple","Orange","Banana","Papaya"]
ad.addEventListener("click",()=>{
arr.forEach(item=> {
const c = document.createElement("li");
c.innerText = item;
p.appendChild(c);
})
})
rm.addEventListener("click",()=>
{
if(p.lastElementChild)
p.removeChild(p.lastElementChild)
})
</script>
</body>
Exercise
Counter App :
<html>
<head>
</head>
<body>
<h1 id ="result">Count</h1>
<button onclick="increment()">+</button>
<button onclick="decrement()">-</button>
<button onclick="reset()">Reset</button>
<script>
let no = 0;
const element = document.getElementById("result");
function increment()
{
no++;
element.innerText = "Count : "+ no;
element.style.color = "green";
document.getElementById("result").style.color = "brown";
}
function decrement()
{
no--;
element.innerText = "Count : "+ no;
element.style.color = "red";
}
function reset()
{
no = 0;
element.innerText = "Count : "+ no;
element.style.color = "black";
}
</script>
</body>
</html>
Light On/Off :
<html>
<head>
</head>
<body>
<img id="img" src="boff.gif" alt="Desc">
<script>
let imng = document.getElementById("img");
imng.addEventListener('click', ()=>{
if (imng.src.includes("bon.gif"))
imng.src = "boff.gif";
else
imng.src = "bon.gif";
})
</script>
</body>
</html>
Change Text on Button Click :
<html>
<head>
</head>
<body>
<h1 id ="head">Hi</h1>
<button id="btn" onclick="changeContent()"> Click</button>
<script>
function changeContent(){
document.getElementById("head").innerText = "Hello"
}
</script>
</body>
</html>
Live Character Counter :
<html>
<head>
</head>
<body>
<textarea id ="txt" placeholder="Type here" maxlength="100" cols="50" rows="5"></textarea>
<p id="cnt">Count 0</p>
<script>
const txt = document.getElementById("txt");
const cnt = document.getElementById("cnt");
txt.addEventListener("input",countChar)
function countChar(){
cnt.innerText= `Count ${txt.value.length}`;
}
</script>
</body>
</html>
Show/Hide Password :
<html>
<head>
</head>
<body>
<input type="password" id="pswd" placeholder="Enter Password">
<button id="chnge">Show</button>
<script>
const pwd = document.getElementById("pswd");
const btn = document.getElementById("chnge");
btn.addEventListener("click",changeButton)
function changeButton(){
if(pwd.type === "password"){
pwd.type = "text";
btn.innerText = "Hide";
}
else{
pwd.type = "password";
btn.innerText = "Show";
}
}
</script>
</body>
</html>
Change background color on button click :
<html>
<head>
</head>
<body>
<input id ="inpt" placeholder="Enter the color">
<button id="btn">Change</button>
<script>
const btn = document.getElementById("btn");
const inpt = document.getElementById("inpt");
btn.addEventListener("click",()=>{
document.body.style.backgroundColor = inpt.value
})
</script>
</body>
</html>
uppercase converter :
<html>
<head>
</head>
<body>
<input id ="inpt" placeholder="Enter here">
<button id="btn">Change</button>
<script>
const btn = document.getElementById("btn");
const inpt = document.getElementById("inpt");
btn.addEventListener("click",()=>{
inpt.value = inpt.value.toUpperCase();
})
</script>
</body>
</html>
Top comments (0)