Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Syntax
3.
Parameters
4.
Return Value
5.
Examples
5.1.
Example 1: Adding a New Element
5.2.
HTML
5.3.
Example 2: Using Document Fragments
6.
Frequently Asked Questions
6.1.
Can appendChild move an existing element in the DOM?
6.2.
What happens if appendChild is called with a null or undefined argument?
6.3.
How does appendChild differ from insertBefore?
7.
Conclusion
Last Updated: Mar 27, 2024
Easy

Appendchild Javascript

Author Gaurav Gandhi
0 upvote
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

JavaScript, a cornerstone of web development, offers various methods to manipulate the Document Object Model (DOM). Among these, appendChild is a fundamental method, enabling developers to add new nodes to the DOM dynamically. 

Its importance lies in its ability to let scripts create interactive and responsive web pages, a must-have skill for every budding coder. Let's dive deeper into this essential JavaScript method.

Syntax

The syntax of appendChild is straightforward yet powerful. It is a method of the Node interface in JavaScript's DOM.

Syntax:

 parentNode.appendChild(childNode)

 

Here, parentNode is an existing node in the DOM to which you want to add a new child node, and childNode is the new node that you want to add. This method is particularly useful for adding elements, text nodes, or even document fragments to the DOM. Understanding this syntax is key to leveraging the full potential of appendChild.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Parameters

The appendChild method in JavaScript takes a single parameter: the childNode. This parameter is crucial as it represents the node you wish to add to the specified parent node. 

The childNode can be any of the following types:

Element Node: Often the most common use-case, where you append an HTML element.
 

Text Node: Used for appending text to an element, it's handy for adding dynamic content.
 

Document Fragment: This is a lesser-known yet efficient way to insert a group of nodes together.

Return Value

The appendChild method in JavaScript has a straightforward return value. It returns the childNode that was added to the parent. This feature can be incredibly useful. For instance, it allows you to chain operations on the newly added node or verify that the node has been correctly appended. Here's a quick example:

var parentElement = document.getElementById('parent');
var newElement = document.createElement('div');
// Appending & chaining operations
parentElement.appendChild(newElement).classList.add('new-class');


In this snippet, the appendChild method not only adds the new div element to parentElement but also allows immediate application of a new class to it. This return value functionality enriches the method, making it more versatile in web development.

Examples

Example 1: Adding a New Element

  • HTML

HTML

<!DOCTYPE html>

<html>

<head>

<style>

h1,h2 {

font-weight: bold;

color: blue;

}

body {

margin-left: 130px;

}

</style>

</head>



<body>

<h1>Coding Ninjas</h1>

<h2>DOM appendchild() javascript Method</h2>

<ul id="CN">

<li>Operating systems</li>

<li>Data Structures using C++</li>

</ul>

<button click="method()">

Submit

</button>


<script>

function method() {

let node = document.createElement("LI");

let textnode = document.createTextNode("Cloud Computing");

node.appendChild(textnode);

document.getElementById("Ninja").appendChild(node);

}

</script>

</body>

</html>


Output

Output

Example 2: Using Document Fragments

Imagine you need to add multiple list items to a list but want to avoid multiple reflows and repaints.

var myList = document.getElementById('myList');
var fragment = document.createDocumentFragment();
for(var i = 0; i < 5; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = 'Item ' + (i + 1);
    fragment.appendChild(listItem);
}
myList.appendChild(fragment);


This example utilizes a document fragment to assemble all the list items and then appends them all at once, enhancing performance.

Frequently Asked Questions

Can appendChild move an existing element in the DOM?

Yes, appendChild can be used to move an existing element. If the node being appended is already in the DOM, it will be moved to the new location, not duplicated. This behavior is handy for reorganizing elements dynamically.

What happens if appendChild is called with a null or undefined argument?

If appendChild is called with a null or undefined argument, JavaScript will throw a TypeError. Ensuring the node to be appended exists and is valid is crucial before calling this method.

How does appendChild differ from insertBefore?

While appendChild adds a node as the last child of the parent, insertBefore allows more control by inserting a node before a specified existing child node. insertBefore is useful for placing new nodes at specific positions within the parent.

Conclusion

In summary, appendChild in JavaScript is an indispensable method for web developers, especially for those creating dynamic and interactive web pages. Its simplicity in syntax, combined with the flexibility offered by its parameters and return value, makes it a powerful tool in DOM manipulation. Through practical examples and addressing common questions, we've seen how appendChild can be used effectively in various scenarios. Understanding and mastering this method is key for any student delving into the world of web development, paving the way for creating more complex and responsive web interfaces.

You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. 

Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Previous article
Lodash _.isArrayLike() Method
Next article
Lodash _.assignWith() Method
Live masterclass