The Project | About Us | Contribute | Donations | License

HOME

In this lesson, we will explore how to dynamically create and remove DOM elements using JavaScript. This is a crucial skill for building interactive web applications where the content needs to change in response to user actions.

Key Concepts

Creating Elements: Using document.createElement().
Appending Elements: Using appendChild() and append().
Inserting Elements: Using insertBefore() and insertAdjacentElement().
Removing Elements: Using removeChild() and remove().
Replacing Elements: Using replaceChild().

Creating Elements

To create a new DOM element, you use the document.createElement() method. This method takes a tag name as an argument and returns a new element of that type.

// Create a new <div> element
let newDiv = document.createElement('div');

Example: Creating and Appending an Element

// Create a new <p> element
let newParagraph = document.createElement('p');

// Create a text node
let textNode = document.createTextNode('Hello, World!');

// Append the text node to the <p> element
newParagraph.appendChild(textNode);

// Append the <p> element to the body
document.body.appendChild(newParagraph);

In this example:

We create a new <p> element.
We create a text node with the content "Hello, World!".
We append the text node to the <p> element.
Finally, we append the <p> element to the document's body.

Appending Elements

There are two main methods to append elements to the DOM: appendChild() and append().

appendChild()

The appendChild() method adds a node to the end of the list of children of a specified parent node.

let parentElement = document.getElementById('parent');
let childElement = document.createElement('div');
parentElement.appendChild(childElement);

append()

The append() method can append multiple nodes and strings.

let parentElement = document.getElementById('parent');
parentElement.append('Text content', document.createElement('span'));

Inserting Elements

insertBefore()

The insertBefore() method inserts a node before a reference node as a child of a specified parent node.

let parentElement = document.getElementById('parent');
let newElement = document.createElement('div');
let referenceElement = document.getElementById('reference');
parentElement.insertBefore(newElement, referenceElement);

insertAdjacentElement()

The insertAdjacentElement() method inserts an element at a specified position relative to the target element.

let targetElement = document.getElementById('target');
let newElement = document.createElement('div');
targetElement.insertAdjacentElement('beforebegin', newElement);

Positions for insertAdjacentElement():

beforebegin: Before the target element itself.
afterbegin: Just inside the target element, before its first child.
beforeend: Just inside the target element, after its last child.
afterend: After the target element itself.

Removing Elements

removeChild()

The removeChild() method removes a specified child node from the DOM and returns the removed node.

let parentElement = document.getElementById('parent');
let childElement = document.getElementById('child');
parentElement.removeChild(childElement);

remove()

The remove() method removes the element from the DOM.

let element = document.getElementById('element');
element.remove();

Replacing Elements

replaceChild()

The replaceChild() method replaces a child node within the specified parent node.

let parentElement = document.getElementById('parent');
let newElement = document.createElement('div');
let oldElement = document.getElementById('old');
parentElement.replaceChild(newElement, oldElement);

Practical Exercise

Exercise: Create and Remove Elements

Create a button that, when clicked, adds a new list item to an unordered list.
Create another button that, when clicked, removes the last item from the list.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <button id="addButton">Add Item</button>
    <button id="removeButton">Remove Item</button>

    <script>
        document.getElementById('addButton').addEventListener('click', function() {
            let ul = document.getElementById('myList');
            let li = document.createElement('li');
            li.textContent = 'New Item';
            ul.appendChild(li);
        });

        document.getElementById('removeButton').addEventListener('click', function() {
            let ul = document.getElementById('myList');
            if (ul.lastChild) {
                ul.removeChild(ul.lastChild);
            }
        });
    </script>
</body>
</html>

In this exercise:

The "Add Item" button appends a new list item to the unordered list.
The "Remove Item" button removes the last item from the list if it exists.

Conclusion

In this lesson, we covered how to create, append, insert, remove, and replace DOM elements using JavaScript. These operations are fundamental for dynamically manipulating the content of web pages, enabling you to build interactive and responsive web applications. Practice these techniques to become proficient in DOM manipulation.

Creating and Removing DOM Elements

Key Concepts

Creating Elements

Example: Creating and Appending an Element

Appending Elements

appendChild()

append()

Inserting Elements

insertBefore()

insertAdjacentElement()

Removing Elements

removeChild()

remove()

Replacing Elements

replaceChild()

Practical Exercise

Exercise: Create and Remove Elements

Solution

Conclusion

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project