Introduction
The appendChild()
method in JavaScript is used to add an element as the last child of a specified parent element. This method takes a single argument: the element that should be added as the last child of the parent element.
Using the appendChild()
method
To use the appendChild()
method, you first need to select the parent element using a method such as document.getElementById()
or document.querySelector()
. Then you can call the appendChild()
method on the parent element, passing in the child element as the argument.
For example, suppose you have a <div>
element with the id "parent", and you want to add a <p>
element as the last child of the <div>
element. You could use the appendChild()
method to do this, as shown in the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="parent"></div>
</body>
<script>
let parent = document.getElementById("parent");
let child = document.createElement("p");
child.textContent = "Welcome Home";
parent.appendChild(child);
</script>
</html>
Output
In this code, the parent
variable is initialized to the <div>
element with the id "parent". The child
variable is then initialized to a new <p>
element that has been created using the document.createElement()
method. Then, the textContent
property is initialized with the “Welcome Home” string.
The appendChild()
method is then called on the parent
element, passing in the child
element as the argument. This adds the child
element as the last child of the parent
element, so that the resulting HTML looks like this:
<div id="parent">
<p>Welcome Home</p>
</div>
If the parent element already has one or more child elements, the appendChild()
method will add the new child element after the last existing child element. For example, suppose you have a <ul>
element with several <li>
elements, and you want to add a new <li>
element as the last child of the <ul>
element with its own text. You could use the appendChild()
method to do this, as shown in the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
<script>
let list = document.getElementById("list");
let item = document.createElement("li");
item.textContent = "Python";
list.appendChild(item);
</script>
</html>
Output
In this code, the list
variable is initialized to the <ul>
element with the id "list". The item
variable is then initialized to a new <li>
element that has been created using the document.createElement()
method. Then pass the string “Python” to the item
variable using the textContent
property.
The appendChild()
method is then called on the list
element, passing in the item
element as the argument. This adds the item
element as the last child of the list
element, so that the resulting HTML looks like this:
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Python</li>
</ul>
In this example, the appendChild()
method adds the new <li>
element as the last child of the <ul>
element, after the existing <li>
elements.
One thing to keep in mind when using the appendChild()
method is that the child element that is added to the parent element will be removed from its current location in the DOM (if it has one). This means that if the child element is already a child of another element, it will be removed from that element and added to the new parent element.
For example, suppose you have a <div>
element with the id "parent1", and a <p>
element with the id "child". You could use the appendChild()
method to move the <p>
element from its current parent to the <div>
element, as shown in the following code:
let parent1 = document.getElementById("parent1");
let child = document.getElementById("child");
parent1.appendChild(child);
Output
In this code, the parent1
variable is initialized to the <div>
element with the id "parent1". The child
variable is then initialized to the <p>
element with the id "child".
The appendChild()
method is then called on the parent1
element, passing in the child
element as the argument. This moves the child
element from its current parent element to the parent1
element, so that the resulting HTML looks like this:
<div id="parent1">
<p id="child">Holder Value</p>
</div>
If the child element was previously a child of another element, it will no longer be a child of that element after the appendChild()
method is called.
Summary
In summary, the appendChild()
method in JavaScript is used to add an element as the last child of a specified parent element. This method takes a single argument: the element that should be added as the last child of the parent element. When using the appendChild()
method, keep in mind that the child element will be removed from its current location in the DOM (if it has one), and added to the new parent element.
References
Node.appendChild() - Web APIs | MDN (mozilla.org)