Modify and Delete DOM Elements

In this post, we'll explore DOM manipulation using JavaScript, focusing on creating, appending, and modifying elements in an optimized manner. Let's dive into the following example to understand how to efficiently handle these operations.

HTML Structure

We'll start with a simple HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chai aur code</title>
</head>
<body style="background-color: #212121; color: #fff;">
    <ul class="language">
        <li>Javascript</li>
    </ul>
</body>
</html>

This HTML creates an unordered list (<ul>) with a single list item (<li>) containing the text "Javascript".

Adding Elements with JavaScript

We can use JavaScript to dynamically add more list items to our <ul> element. Let's start with a basic function to add languages:

function addLanguage(langName) {
    const li = document.createElement("li");
    li.innerHTML = `${langName}`; // innerHTML traverses the entire DOM tree
    document.querySelector(".language").appendChild(li);
}

addLanguage("Python");
addLanguage("TypeScript");

In this function, we create a new <li> element, set its innerHTML to the provided language name, and append it to the .language list.

However, using innerHTML for each insertion forces the browser to reparse the entire DOM tree, which can be inefficient for large lists. Let's optimize this.

Optimized Way to Add Elements

A more efficient way to add elements is by using createTextNode, which avoids reparsing the entire DOM tree:

function addOptiLanguage(langName) {
    const li = document.createElement("li");
    li.appendChild(document.createTextNode(langName));
    document.querySelector(".language").appendChild(li);
}

addOptiLanguage("Ruby");
addOptiLanguage("Golang");

This approach is more efficient, especially for large lists, as it reduces the workload on the browser by not requiring it to reparse the entire DOM.

Editing Elements

To edit an existing element, you can use methods like replaceWith and outerHTML:

const secondLang = document.querySelector("li:nth-child(2)");
secondLang.innerHTML = "Mojo";

//another way
const newli = document.createElement("li");
newli.textContent = "Mojo";
secondLang.replaceWith(newli);

Both ways will change the content from Python to Mojo.

Another method:

const firstLang = document.querySelector("li"); //selects the first li
firstLang.outerHTML = "<li>any other language</li>";

Removing Elements

Removing an element is straightforward with the remove method:

const lastLang = document.querySelector("li:last-child");
lastLang.remove();

This code snippet removes "golang" from the last list item from the .language list.

Conclusion

By using these optimized methods for adding, editing, and removing elements, you can ensure your web applications remain performant, even when dealing with large DOM trees. Remember, efficient DOM manipulation is key to creating smooth, responsive user experiences.

Edit and remove elements in DOM

Optimizing DOM Manipulation with JavaScript: A Deep Dive into Efficient Practices

Table of contents