Scribd
Upload
2 views5 pages

Z Ig NQQ

The document explains various DOM manipulation methods in JavaScript, including appendChild() for adding nodes, insertBefore() for inserting nodes at specific positions, and removeChild() for removing nodes. It provides examples demonstrating how to append, insert before, insert after, and remove child nodes within a parent element. Key points highlight the functionality of each method and their usage in dynamically managing web page content.

Uploaded by

Hafsa Nadeem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

Z Ig NQQ

The document explains various DOM manipulation methods in JavaScript, including appendChild() for adding nodes, insertBefore() for inserting nodes at specific positions, and removeChild() for removing nodes. It provides examples demonstrating how to append, insert before, insert after, and remove child nodes within a parent element. Key points highlight the functionality of each method and their usage in dynamically managing web page content.

Uploaded by

Hafsa Nadeem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

1.

Appending a Node to a Parent

The method appendChild() adds a new node as the last child of the specified
parent.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Append Child Example</title>
</head>
<body>
<div id="div1">
<p>Existing Paragraph</p>
</div>
<script>
var parentDiv = document.getElementById("div1");
var newParagraph = document.createElement("p");
var t = document.createTextNode("Hello world!");
newParagraph.appendChild(t);
parentDiv.appendChild(newParagraph);
</script>
</body>
</html>

Result: A new paragraph with "Hello world!" is added at the end of the
<div>.

2. Inserting a Node at a Specific Position

When you want to insert a node at a specific position, use insertBefore().


This method places the new node before a specified child node of the
parent.

Example: Insert at the Beginning


<!DOCTYPE html>
<html lang="en">
<head>
<title>Insert Before Example</title>
</head>
<body>
<div id="div1">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
var parentDiv = document.getElementById("div1");
var newParagraph = document.createElement("p");
var t = document.createTextNode("Inserted Paragraph");
newParagraph.appendChild(t);

var firstChild = parentDiv.firstChild; // First child of the div


parentDiv.insertBefore(newParagraph, firstChild);
</script>
</body>
</html>

Result: The new paragraph is inserted before the first paragraph.

3. Inserting After a Specific Node

Since there is no insertAfter(), you can achieve this by targeting the next
sibling of the node and inserting the new element before it.

Example: Insert After Second Paragraph


<!DOCTYPE html>
<html lang="en">
<head>
<title>Insert After Example</title>
</head>
<body>
<div id="div1">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
var parentDiv = document.getElementById("div1");
var newParagraph = document.createElement("p");
var t = document.createTextNode("Inserted After Second Paragraph");
newParagraph.appendChild(t);

var secondChild = parentDiv.childNodes[1]; // Second paragraph


parentDiv.insertBefore(newParagraph, secondChild.nextSibling); // Insert after the second
child
</script>
</body>
</html>

Result: The new paragraph is inserted after the second paragraph.

4. Removing a Node

You can remove a child node using removeChild().

Example: Remove the Third Child


<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Child Example</title>
</head>
<body>
<div id="div1">
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
</div>
<script>
var parentDiv = document.getElementById("div1");
var nodeToRemove = parentDiv.childNodes[2]; // Third child
parentDiv.removeChild(nodeToRemove);
</script>
</body>
</html>

Result: The third paragraph is removed from the <div>.

Complete Example: Combining All Operations


<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Manipulation Example</title>
</head>
<body>
<div id="div1">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
var parentDiv = document.getElementById("div1");

// Appending a new paragraph


var newParagraph1 = document.createElement("p");
newParagraph1.appendChild(document.createTextNode("Appended Paragraph"));
parentDiv.appendChild(newParagraph1);

// Inserting a paragraph at the beginning


var newParagraph2 = document.createElement("p");
newParagraph2.appendChild(document.createTextNode("Inserted at Beginning"));
parentDiv.insertBefore(newParagraph2, parentDiv.firstChild);

// Inserting a paragraph after the second one


var newParagraph3 = document.createElement("p");
newParagraph3.appendChild(document.createTextNode("Inserted After Second
Paragraph"));
var secondChild = parentDiv.childNodes[1];
parentDiv.insertBefore(newParagraph3, secondChild.nextSibling);

// Removing the third paragraph


var thirdChild = parentDiv.childNodes[2];
parentDiv.removeChild(thirdChild);
</script>
</body>
</html>

Key Points

1. appendChild(): Always places the new node at the end.


2. insertBefore(newNode, referenceNode): Places the new node before the
reference node.
3. removeChild(node): Removes the specified node.
4. nextSibling: Used to target the node that comes after a given node for
insertion.

These methods give you complete control over how nodes are
manipulated and displayed dynamically in your web page.

You might also like