Introduction to DOM Manipulation
The Document Object Model (DOM) is a programming interface provided by the browser that represents an HTML document as a tree-like structure. Every HTML element, attribute, and piece of text becomes an object that JavaScript can access and manipulate.
Using DOM manipulation, We can:
Access HTML elements
Create new elements
Update existing content
Add or remove attributes
Delete elements dynamically
Build interactive web applications
For example, when you click a button and the webpage updates without refreshing, JavaScript is usually manipulating the DOM behind the scenes.
1. Accessing Elements
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- querySelector()
- querySelectorAll()
These are the main DOM element selection (accessing) methods in JavaScript.
For accessing Element using DOM please refer the below link.
https://dev.to/vigneshwaran_v/javascript-html-dom-api-1d58
Before modifying an element, we must first access it from the DOM.
2. Creating Elements
Creating elements means generating new HTML elements dynamically using JavaScript.
createElement()
Creates a new HTML element.
Syntax
document.createElement("tagName");
Example
const heading = document.createElement("h1");
heading.innerText = "Welcome to My Website";
console.log(heading);
Output
<h1>Welcome to My Website</h1>
Note: The element is created in memory and will not appear on the page until it is added to the DOM.
3. Adding Elements
After creating an element, it must be inserted into the webpage.
append()
Adds content at the end of a parent element.
Example
const container = document.getElementById("container");
const p = document.createElement("p");
p.innerText = "New Paragraph";
container.append(p);
Paragraph is added as the last child of that Container.
appendChild()
Adds a single node as the last child of a parent element.
Example
const list = document.getElementById("list");
const li = document.createElement("li");
li.innerText = "Apple";
list.appendChild(li);
Adds the list item at the end.
prepend()
Adds content at the beginning of a parent element.
Example
const container = document.getElementById("container");
const h1 = document.createElement("h1");
h1.innerText = "Welcome";
container.prepend(h1);
Heading appears before all existing children.
before()
Inserts an element before another element.
Example
const para = document.getElementById("para");
const heading = document.createElement("h2");
heading.innerText = "Article Title";
para.before(heading);
Heading appears before the paragraph.
after()
Inserts an element after another element.
Example
const para = document.getElementById("para");
const button = document.createElement("button");
button.innerText = "Read More";
para.after(button);
Button appears after the paragraph.
insertBefore()
Inserts a new element before a specified child element.
Example
const ul = document.getElementById("list");
const newItem = document.createElement("li");
newItem.innerText = "Mango";
const firstItem = ul.children[0];
ul.insertBefore(newItem, firstItem);
Mango becomes the first list item.
Use appendChild() when adding one element node.
Use append() when you want to add multiple elements or text in a single statement.
append() Adding multiple Element
<div id="container"></div>
const container = document.getElementById("container");
const h1 = document.createElement("h1");
h1.innerText = "Title";
const p = document.createElement("p");
p.innerText = "Paragraph";
container.append(h1, p);
Output
<div id="container">
<h1>Title</h1>
<p>Paragraph</p>
</div>
You cannot do this with appendChild().
4. Updating Elements
Updating elements means changing the content of existing HTML elements.
innerText
Returns or updates only the visible text.
Example
<p id="text">Hello World</p>
<script>
document.getElementById("text").innerText = "Welcome";
</script>
Output
Welcome
textContent
Returns or updates all text content, including hidden text.
Example
<p id="text">Hello World</p>
<script>
document.getElementById("text").textContent = "JavaScript DOM";
</script>
Output
JavaScript DOM
innerHTML
Returns or updates HTML content inside an element.
Example
<div id="box"></div>
<script>
document.getElementById("box").innerHTML =
"<h2>Welcome</h2><p>This is a paragraph.</p>";
</script>
Output
Welcome
This is a paragraph.
Note: innerHTML can add HTML tags, while innerText and textContent add only plain text.
5. Working with Attributes
Attributes provide additional information about HTML elements.
setAttribute()
Adds or updates an attribute.
Example
const image = document.getElementById("photo");
image.setAttribute("src", "image.jpg");
Output
<img src="image.jpg">
getAttribute()
Gets the value of an attribute.
Example
const image = document.getElementById("photo");
console.log(image.getAttribute("src"));
Output
image.jpg
removeAttribute()
Removes an attribute.
Example
const image = document.getElementById("photo");
image.removeAttribute("src");
Output
<img>
hasAttribute()
Checks whether an attribute exists.
Example
const image = document.getElementById("photo");
console.log(image.hasAttribute("src"));
Output
true
setAttribute() does not append values to an existing attribute. It sets the attribute to the exact value you provide.
Syntax
element.setAttribute(attributeName, value);
With id
Example
<p id="para">Hello</p>
const p = document.getElementById("para");
p.setAttribute("id", "message");
Output
<p id="message">Hello</p>
The old id="para" is replaced by id="message".
Since an element should have only one ID, the previous ID is overwritten.
With class
Example
<p class="text">Hello</p>
const p = document.querySelector("p");
p.setAttribute("class", "heading");
Output
<p class="heading">Hello</p>
The old class text is removed and replaced with heading.
Multiple Classes
Suppose you have:
<p class="text">Hello</p>
p.setAttribute("class", "text active");
Ouput
<p class="text active">Hello</p>
Now the element has two classes:
text
active
But notice that you're still replacing the entire class attribute value with "text active".
If You Want to Add a Class Without Removing Existing Ones
**Use classList.add()**
Example
<p class="text">Hello</p>
p.classList.add("active");
Output
<p class="text active">Hello</p>
Here the existing class text remains, and active is added.
- setAttribute() replaces the entire attribute value. It does not merge or append automatically. For classes, classList is usually the better choice when you want to add or remove classes dynamically.
We can do the same things simply without using these functions.
Changing an ID
<p id="para">Hello</p>
const p = document.getElementById("para");
p.id = "message";
Output
<p id="message">Hello</p>
Removing an ID
p.id = "";
Output
<p>Hello</p>
Changing a Class
<p class="text">Hello</p>
p.className = "heading";
Output
<p class="heading">Hello</p>
Adding Multiple Classes
p.className = "text active";
Output
<p class="text active">Hello</p>
Removing All Classes
p.className = "";
Output
<p>Hello</p>
- For common attributes (id, class, src, href, value), developers usually use the property approach because it's shorter and easier to read. setAttribute() and removeAttribute() are more useful when working with custom attributes.
6. Removing Elements
Removing elements means deleting HTML elements from the DOM.
remove()
Removes an element from the webpage.
Example
<p id="message">This message will be removed.</p>
<script>
const msg = document.getElementById("message");
msg.remove();
</script>
The paragraph is completely removed from the webpage.
DOM CRUD Operations Summary
CRUD stands for Create, Read, Update, and Delete.
Example CRUD Flow
// Create
const p = document.createElement("p");
// Update
p.innerText = "Hello DOM";
// Add to page
document.body.appendChild(p);
// Delete
p.remove();
DOM Manipulation is one of the most important concepts in JavaScript because it allows developers to interact with and modify web pages dynamically. By learning how to access, create, add, update, and remove elements, you can build interactive applications such as to-do lists, calculators, form validators, and many other modern web projects. Mastering these DOM methods is a strong foundation for learning advanced JavaScript frameworks and front-end development.
References
https://www.freecodecamp.org/news/the-javascript-dom-manipulation-handbook
https://www.w3schools.com/js/js_htmldom_html.asp
https://www.w3schools.com/jsref/met_node_appendchild.asp
Top comments (0)