Adding New Element to the DOM
We can add new element dynamically by creating a new element using createElement, and finally appending the new element to the DOM with methods like appendChild.
Example: In the example, we will see how to add new elements to the DOM.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >HTML DOM</ title > </ head > < body > < h1 id = "w3wiki" style = "color: green;" > w3wiki </ h1 > < h3 > Adding new element to the DOM </ h3 > < button id = "btn" > Click to Add Element </ button > < script > const btn = document.getElementById("btn"); btn.addEventListener("click", function () { // Create a new paragraph element const newPara = document.createElement("p"); newPara.textContent = "This paragraph element was added dynamically on click."; // Append the new element to the body document.body .appendChild(newPara); }); </ script > </ body > </ html > |
Output:
What is HTML DOM ?
HTML DOM stands for the Document Object Model is a tree-like structure that offers dynamic interaction and manipulation of the content, structure, and style of an HTML document. It is an interface for web documents. Based on user activity The HTML DOM offers to create interactive web pages where elements can be added, removed, or modified.
Table of Content
- Significance of HTML DOM
- HTML DOM Structure
- Adding New Element to the DOM
- Techniques for Finding DOM Elements
- Event Listeners
- Accessing the DOM
Contact Us