Working with JavaScript AppendChild() Method
Last updated on: by Digamber
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.appendChild() Browser Support
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes |
Check out detailed browser compatibility report on MDN Web Docs
