Implement Prepend and Append with Regular JavaScript
Last Updated :
20 Jun, 2023
The task is to implement prepend() and append() methods using regular JavaScript. We’re going to discuss a few methods. First few methods to know:
JavaScript 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.
Example: This example creates a new <p> element and inserts it as the first child of the <div> element using insertBefore() method.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Implement prepend and append
with regular JavaScript
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on Button to Implement
Prepend Method
</h3>
<ul id="parent">
<li class="child">Child 1</li>
<li class="child">Child 2</li>
<li class="child">Child 3</li>
</ul>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG"></p>
<script>
var elm = document.getElementById("GFG");
function gfg_Run() {
let par = document.getElementById("parent");
let child = document.getElementsByClassName("child");
let newEl = document.createElement("li");
newEl.innerHTML = "Child 0";
par.insertBefore(newEl, child[0]);
elm.innerHTML = "New element inserted";
}
</script>
</body>
</html>
|
Output:
JavaScript appendChild() Method: This method appends a node as the last child of a node.
Syntax:
node.appendChild(Node)
Parameters: It accepts single parameter Node which is required. It specifies the node object to append.
Example: This example creates a new <p> element and inserts it as the last child of the <div> element using appendChild() method.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Implement prepend and append
with regular JavaScript
</title>
</head>
<body style="margin-left: 50px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Click on Button to Implement Append Method
</h3>
<ul id="parent">
<li class="child">Child 1</li>
<li class="child">Child 2</li>
<li class="child">Child 3</li>
</ul>
<button onclick="gfg_Run()">
Click Here
</button>
<p id="GFG"></p>
<script>
var elm = document.getElementById("GFG");
function gfg_Run() {
let par = document.getElementById("parent");
let child = document.getElementsByClassName("child");
let newEl = document.createElement("li");
newEl.innerHTML = "Child 4";
par.appendChild(newEl);
elm.innerHTML = "New element inserted";
}
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...