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>
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>
Top comments (0)