Working with JavaScript AppendChild() Method

By Digamber Rawat Last updated 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
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.