How to use appendchild() in JavaScript? [SOLVED]


Written By - Olorunfemi Akinlua
Advertisement

Introduction

The appendChild() method in JavaScript is used to add an element as the last child of a specified parent element. This method takes a single argument: the element that should be added as the last child of the parent element.

 

Using the appendChild() method

To use the appendChild() method, you first need to select the parent element using a method such as document.getElementById() or document.querySelector(). Then you can call the appendChild() method on the parent element, passing in the child element as the argument.

For example, suppose you have a <div> element with the id "parent", and you want to add a <p> element as the last child of the <div> element. You could use the appendChild() method to do this, as shown in the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="parent"></div>
    </body>
    <script>
        let parent = document.getElementById("parent");
        let child = document.createElement("p");
        child.textContent = "Welcome Home";

        parent.appendChild(child);
    </script>
</html>

Output

Welcome Home

 

In this code, the parent variable is initialized to the <div> element with the id "parent". The child variable is then initialized to a new <p> element that has been created using the document.createElement() method. Then, the textContent property is initialized with the “Welcome Home” string.

The appendChild() method is then called on the parent element, passing in the child element as the argument. This adds the child element as the last child of the parent element, so that the resulting HTML looks like this:

<div id="parent">
  <p>Welcome Home</p>
</div>

If the parent element already has one or more child elements, the appendChild() method will add the new child element after the last existing child element. For example, suppose you have a <ul> element with several <li> elements, and you want to add a new <li> element as the last child of the <ul> element with its own text. You could use the appendChild() method to do this, as shown in the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <ul id="list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ul>
    </body>
    <script>
        let list = document.getElementById("list");
        let item = document.createElement("li");
        item.textContent = "Python";

        list.appendChild(item);
    </script>
</html>

Output

Advertisement

How to use appendchild() in JavaScript? [SOLVED]

 

In this code, the list variable is initialized to the <ul> element with the id "list". The item variable is then initialized to a new <li> element that has been created using the document.createElement() method. Then pass the string “Python” to the item variable using the textContent property.

The appendChild() method is then called on the list element, passing in the item element as the argument. This adds the item element as the last child of the list element, so that the resulting HTML looks like this:

<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>Python</li>
</ul>

In this example, the appendChild() method adds the new <li> element as the last child of the <ul> element, after the existing <li> elements.

One thing to keep in mind when using the appendChild() method is that the child element that is added to the parent element will be removed from its current location in the DOM (if it has one). This means that if the child element is already a child of another element, it will be removed from that element and added to the new parent element.

For example, suppose you have a <div> element with the id "parent1", and a <p> element with the id "child". You could use the appendChild() method to move the <p> element from its current parent to the <div> element, as shown in the following code:

let parent1 = document.getElementById("parent1");
let child = document.getElementById("child");

parent1.appendChild(child);

Output

How to use appendchild() in JavaScript? [SOLVED]

 

In this code, the parent1 variable is initialized to the <div> element with the id "parent1". The child variable is then initialized to the <p> element with the id "child".

The appendChild() method is then called on the parent1 element, passing in the child element as the argument. This moves the child element from its current parent element to the parent1 element, so that the resulting HTML looks like this:

Advertisement
<div id="parent1">
  <p id="child">Holder Value</p>
</div>

If the child element was previously a child of another element, it will no longer be a child of that element after the appendChild() method is called.

 

Summary

In summary, the appendChild() method in JavaScript is used to add an element as the last child of a specified parent element. This method takes a single argument: the element that should be added as the last child of the parent element. When using the appendChild() method, keep in mind that the child element will be removed from its current location in the DOM (if it has one), and added to the new parent element.

 

References

Node.appendChild() - Web APIs | MDN (mozilla.org)

 

Didn't find what you were looking for? Perform a quick search across GoLinuxCloud

If my articles on GoLinuxCloud has helped you, kindly consider buying me a coffee as a token of appreciation.

Buy GoLinuxCloud a Coffee

For any other feedbacks or questions you can either use the comments section or contact me form.

Thank You for your support!!

Leave a Comment