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.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: