Trending October 2023 # How Does Appendchild Javascript Work? # Suggested November 2023 # Top 14 Popular

You are reading the article How Does Appendchild Javascript Work? updated in October 2023 on the website Restaurant12h.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 How Does Appendchild Javascript Work?

Introduction to appendChild JavaScript

appendChild JavaScript is a method which helps in adding nodes at the end of the existing child nodes. It helps in creating a text node which will be after the last child node. It also helps in adding elements to an object, one element after another. This function creates a text node, and then it appends it to the existing elements. Once the element is added, it appends the entire element to the document.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

How does appendChild JavaScript work?

Syntax for this method is as below:

node.appendChild(node)

This method accepts only one parameter, and which is mandatory. This will be the object or element which is to be appended. The return value of this function is that the child will be appended to the existing document. It will return the element with the appended child.

let ap = document.createElement("ap"); document.body.appendChild(ap);

Let us see how this function works. In the above snippet, we create an element ‘ap’. This element is not existing in the document object model anywhere. It will, as a result, create the element. Now we will have to append this object to some element. Hence the second statement above appends the child to the body. The hierarchy above the body is the document. Hence, we follow the hierarchy. First, the document, the element and in the end, the object to be appended. The newly created object in the above snippet is hence appended in the existing document that we have.

Examples of appendChild JavaScript

Given below are the examples of appendChild JavaScript:

Example #1

Code:

h1, h2 { font-weight: italic; color: blue; } body { margin-left: 150px; } function educba() { var node = document.createElement(“LI”); var textnew = document.createTextNode(“Data Analytics”); node.appendChild(textnew); document.getElementById(“edu”).appendChild(node); }

Output:

Data Analytics is added after the two existing subjects.

Example #2

Code:

#sudo { border: 1px solid yellow; background-color: yellow; margin-bottom: 10px; color: red; font-weight: bold; } h1, h2 { text-align: right; color: orange; font-weight: bold; } The Website we should choose for learning computer science is - function edu() { var node = document.createElement(“P”); var t = document.createTextNode(“EduCBA”); node.appendChild(t); document.getElementById(“sudo”).appendChild(node); }

Let us see what is happening in this code.

In this program, we are appending a node. We have created JavaScript where we have different fonts to be displayed. We have a sudo id created here, which is helping us to display a particular node. This is the mode which we are appending. Here we are appending the node to sudo id. The node is again created first in the function. We append the child by using the ID generated by the div tab. Hence here, we have made use of getElementById to append the element to the document.

Output:

Example #3

Code:

#sudo { border: 1px solid blue; background-color: blue; margin-bottom: 15px; color: white; font-weight: bold; } h1, h2 { text-align: center; color: blue; font-weight: bold; } function createMultipleAppend(name) { let li = document.createElement(‘li’); li.textContent = name; return li; } const menu = document.querySelector(‘#menu’); menu.appendChild(createMultipleAppend(‘Home’)); menu.appendChild(createMultipleAppend(‘Services’)); menu.appendChild(createMultipleAppend(‘About Us’));

Output:

If you check, we have the appended data displayed by making use of the bullets. We have made use of multiple appends and have the data displayed.

Conclusion

The appendChild function helps us in appending object to the current element, and then the element can be appended to the existing document. This helps us in adding new objects to the existing elements and document models easily. We can create text nodes and use them to append it to the document. It can also be used to move any existing child node to a new position which is specified in the document.