Implement prepend and append with regular JavaScript
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:
