Working with JavaScript AppendChild() Method

Article By Digamber Rawat on
JavaScript AppendChild() method is used to create a text node at the last child of the current element. This function is also beneficial when you need to move from one element to another element.

The critical thing to consider here is appendChild() method returns the child element, so chaining might not work.

  • createElement: This method is used to create new element once we are done creating new element then we put it into the appendChild method.
  • insertBefore: This JavaScript method is beneficial when you required to insert an element before the particular child in DOM.
  • removeChild: Use this method to remove any specific child from the DOM.
  • insertRow and insertCell: These methods are used when you need to insert a new row into the table or new cell within a row.

JavaScript AppendChild Syntax

element.appendChild(elementToAppend);

It will return the newly appended element.

AppendChild() Examples

In the below example, I’m going to give you the demo of how to create a new node every time a user clicks on the create element button. We’ve created a function by the name of createChild(), within the function we’ve mentioned myEle variable in which we are creating a new span element.

Then we are setting up the “hello world” string with “blue color”. When a user clicks on the button, we’ll put a newly created element in wrapper span with the help of appendChild() method.

<!DOCTYPE html>
<html>
<title>JavaScript AppendChild | Demo</title>
<meta charset="UTF-8">
<body>
<button onclick="createChild()">Click to Add Element</button>
<div id="wrapper"></div>
<script>
function createChild() {
let myEle = document.createElement("span");
myEle.innerHTML = "hello world";
myEle.style.color = "blue";
let wrapper = document.getElementById("wrapper");
wrapper.appendChild(myEle);
}
</script>
</body>
</html>

Node​.append​Child() Browser Support

Chrome Firefox Edge Safari Opera
Yes Yes Yes Yes Yes

Check out detailed browser compatibility report on MDN Web Docs

Digamber Rawat

Feel free to contact me, If you are looking for a freelance full stack Developer, with the following skills: Mongo DB, Express JS, Angualr 2+, Node JS, Loopback JS, Firebase, Ionic Framework and WordPress. I also offer remote contracting service to the clients across the globe. Hire Me