JavaScript DOM Manipulation

Introduction

In the previous two installments of this blog post series, we've dived into the realm of JavaScript DOM manipulation, mastering the techniques for selecting and modifying elements within the HTML document. Now, we venture further into the dynamic world of creating and appending elements.

Creating and Appending Elements in the DOM:

Creating and appending elements is the cornerstone of building interactive and dynamic web applications. It empowers us to construct new elements, both programmatically and in response to user interactions, and seamlessly integrate them into the existing DOM structure.

1. createElement and appendChild:

createElement:
It creates a new HTML element.
appendChild:
It appends the newly created element as a child of an existing element.

<!-- HTML -->
<div id="myDiv">Existing Content</div>


<!-- JavaScript -->
<script>
    // Creating a new paragraph element
    const newParagraph = document.createElement('p');
    newParagraph.innerText = 'This is a new paragraph!';

    // Appending the new paragraph to an existing div
    const existingDiv = document.getElementById('myDiv');
    existingDiv.appendChild(newParagraph);
</script>

2. insertBefore:

insertBefore:
It inserts a new element before an existing element.

<!-- HTML -->
<div id="myDiv">
    <p>Existing Paragraph 1</p>
    <p>Existing Paragraph 2</p>
</div>


<!-- JavaScript -->
<script>
    // Creating a new paragraph element
    const newParagraph = document.createElement('p');
    newParagraph.innerText = 'This is a new paragraph!';

    // Inserting the new paragraph before the second existing paragraph
    const existingDiv = document.getElementById('myDiv');
    const secondParagraph = existingDiv.getElementsByTagName('p')[1];
    existingDiv.insertBefore(newParagraph, secondParagraph);
</script>

3. prepend:

prepend:
It adds one or more elements to the beginning of an element's children.

<!-- HTML -->
<div id="myDiv">
    <p>Existing Paragraph 1</p>
    <p>Existing Paragraph 2</p>
</div>


<!-- JavaScript -->
<script>
    // Creating a new paragraph element
    const newParagraph = document.createElement('p');
    newParagraph.innerText = 'This is a new paragraph!';

    // Prepending the new paragraph to the existing div
    const existingDiv = document.getElementById('myDiv');
    existingDiv.prepend(newParagraph);
</script>

4. replaceChild:

replaceChild:

It replaces an existing child element with a new one.

<!-- HTML -->
<div id="myDiv">
    <p>Existing Paragraph</p>
</div>


<!-- JavaScript -->
<script>
    // Creating a new div element
    const newDiv = document.createElement('div');
    newDiv.innerText = 'This is a new div!';

    // Replacing the existing paragraph with the new div
    const existingDiv = document.getElementById('myDiv');
    const existingParagraph = existingDiv.querySelector('p');
    existingDiv.replaceChild(newDiv, existingParagraph);
</script>

These examples demonstrate different methods for Creating and Appending elements in the DOM using JavaScript. Experiment with these techniques to dynamically modify the structure of your HTML document and enhance the interactivity of your web applications.

Check out next blog of this series for details about Event Handling in the DOM using JavaScript!✌️

~HappyCoding!🎓

TheCodingCo Blogs