Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Implement prepend and append with regular JavaScript

  • Difficulty Level : Basic
  • Last Updated : 24 Jun, 2019

The task is to implement prepend() and append() method using regular JavaScript. We’re going to discuss a few methods.
First few methods to know

  • insertBefore() Method:
    This method inserts a node as a child, just before an existing child, which is specified.

    Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

    Syntax:

    node.insertBefore(newNode, existingNode)
    

    Parameters:



    • newNode: This parameter is required. It specifies the node object to insert.
    • existingNode: This parameter is required. It specifies the child node to insert the new node before it. If not used, the method will insert the newNode at the end.

    Return value:
    It returns a node object, which represents the inserted node.

  • appendChild() Method:
    This method appends a node as the last child of a node.
    Syntax:
    node.appendChild(Node)
    

    Parameters:

    • Node: This parameter is required. It specifies the node object to append.

    Return value:
    It returns a node object, Which represents the appended node.

Example 1: This example creates a new <p> element and inserts it as the first child of the <div> element using insertBefore() method.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | implement prepend and 
      append with regular JavaScript.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP" 
       style="font-size: 15px; font-weight: bold;">
    </p>
    <div id="parent">
        <p class="child">child_1</p>
        <p class="child">child_2</p>
        <p class="child">child_3</p>
    </div>
    <button onclick="gfg_Run()">
        Click here
    </button>
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 20px;
              font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var today = 'Click on button implement prepend method';
        el_up.innerHTML = today;
  
        function gfg_Run() {
            var par = document.getElementById("parent");
            var child = document.getElementsByClassName("child");
            var newEl = document.createElement("p");
            newEl.innerHTML = "child_0";
            par.insertBefore(newEl, child[0]);
            el_down.innerHTML = "New element inserted";
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example creates a new <p> element and inserts it as the last child of the <div> element using appendChild() method.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        JavaScript 
      | implement prepend and append 
      with regular JavaScript.
    </title>
</head>
  
<body style="text-align:center;" id="body">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP"
       style="font-size: 15px;
              font-weight: bold;">
    </p>
    <div id="parent">
        <p class="child">child_1</p>
        <p class="child">child_2</p>
        <p class="child">child_3</p>
    </div>
    <button onclick="gfg_Run()">
        Click here
    </button>
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 20px;
              font-weight: bold;">
    </p>
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        var today = 'Click on button implement append method';
        el_up.innerHTML = today;
  
        function gfg_Run() {
            var par = document.getElementById("parent");
            var newEl = document.createElement("p");
            newEl.innerHTML = "child_4";
            par.appendChild(newEl);
            el_down.innerHTML = "New element inserted";
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!