How to use createElement and removeChild In Javascript
In this approach, we are using the createElement() method to dynamically add a new HTML tag and the removeChild method to remove it. This approach provides more control over the newly created tag and allows for efficient addition and removal of the tag from the DOM.
Example: The example demonstrates adding and removing new HTML Tags with JavaScript using createElement and removeChild.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: green;
}
#container {
margin-top: 20px;
text-align: center;
}
#container button {
margin: 2px;
padding: 5px 10px;
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
#container button:hover {
background-color: #2980b9;
}
.new-div {
margin-top: 10px;
padding: 10px;
margin-left: 43%;
width: 100px;
background-color: green;
border-radius: 5px;
color: white;
}
</style>
</head>
<body>
<div id="container">
<h1>w3wiki</h1>
<button onclick="addDiv()">
Add Div
</button>
<button onclick="removeDiv()">
Remove Div
</button>
</div>
<script>
function addDiv() {
let container =
document.getElementById('container');
// Create a new div
let newDiv =
document.createElement('div');
newDiv.className = 'new-div';
newDiv.textContent = 'New Div Tag';
// Add the new div to the container
container.appendChild(newDiv);
}
function removeDiv() {
let container =
document.getElementById('container');
// Remove the last added div
let divs = container.querySelectorAll('.new-div');
if (divs.length > 0) {
let lastDiv = divs[divs.length - 1];
container.removeChild(lastDiv);
}
}
</script>
</body>
</html>
Output:
Remove & Add new HTML Tags using JavaScript
In web development, dynamically add or remove HTML tags using JavaScript. This can be useful for creating interactive user interfaces and updating content based on user actions.
Below are the approaches to remove and add new HTML tags using JavaScript:
Table of Content
- Using createElement and removeChild
- Using innerHTML