Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript program to update DOM
JavaScript is a powerful tool for dynamically updating the Document Object Model (DOM) of a web page. The Document Object Model (DOM) is an important part of web development that allows changing the structure, content, and style of a webpage. This article explains how to update the DOM using different methods and provides examples.
Understanding the DOM
DOM stands for Document Object Model. The DOM represents a webpage as a tree structure, where each element is a node. JavaScript allows developers to select, modify, and manipulate these elements in real time, making web pages dynamic and interactive.
Updating the DOM
Updating the Document Object Model can be done in the following ways:
Adding Elements
The DOM allows adding elements to it. To add elements to the DOM, you can use methods like createElement() to create a new element and/or appendChild() or insertBefore() it to the document.
Example
The following is a simple example of adding elements to the DOM.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<button id="addParagraph">Add a Paragraph</button>
<script>
// Function to create and add a new paragraph
function addNewParagraph() {
// Create a new paragraph element
let newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
// Get the body element
let body = document.body;
// Append the new paragraph to the body
body.appendChild(newParagraph);
}
// Add an event listener to the button
document.getElementById('addParagraph').addEventListener('click', addNewParagraph);
</script>
</body>
</html>
Output
Removing Elements
The DOM allows removing elements from it. To remove elements from the DOM, you can use the remove() method or the removeChild() method.
Example
The following is a simple example of removing elements from the DOM.
<!DOCTYPE html>
<html>
<head>
<title>Remove Element Example</title>
</head>
<body>
<h1>Remove an Element from the DOM</h1>
<p id="removeMe">This paragraph will be removed when you click the button.</p>
<button id="removeButton">Remove Paragraph</button>
<script>
// Function to remove the element
function removeElement() {
// Get the element to remove
let elementToRemove = document.getElementById('removeMe');
// Remove the element
if (elementToRemove) {
elementToRemove.remove();
}
}
// Add an event listener to the button
document.getElementById('removeButton').addEventListener('click', removeElement);
</script>
</body>
</html>
Output
Modifying Elements
The DOM allows modifying its elements. You can modify elements by changing their attributes, styles, or content.
Example
The following is a simple example of changing the attributes, styles, or content DOM.
<!DOCTYPE html>
<html>
<head>
<title>Modify Element Example</title>
<style>
.new-class {
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Modify an Element in the DOM</h1>
<p id="modifyMe">This text will be modified when you click the button.</p>
<button id="modifyButton">Modify Text</button>
<script>
// Function to modify the element
function modifyElement() {
// Get the element
let elementToModify = document.getElementById('modifyMe');
// Change the text content
elementToModify.textContent = 'Modified text';
// Change the style
elementToModify.style.color = 'blue';
// Add a class
elementToModify.classList.add('new-class');
}
// Add an event listener to the button
document.getElementById('modifyButton').addEventListener('click', modifyElement);
</script>
</body>
</html>
Output
Conclusion
In this article, we have understood how much the Document Object Model is essential and how to update it. JavaScript offers strong tools for updating the DOM, which helps developers create dynamic and interactive web pages. By learning how to add, remove, and change elements, developers can build complex user interfaces that react to user actions.
653 Views
