Javascript DOM HTML Node appendChild() Method

Introduction

Append an item in a list.

Click the button to append an item to the end of the list.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<ul id="myList">
  <li>CSS</li>
  <li>HTML</li>
</ul>/*  w ww  . j a v  a 2 s  .  co  m*/
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  var node = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}
</script>
</body>
</html>

The appendChild() method appends a node as the last child of a node. 

appendChild(node);

Parameter Values

Parameter TypeDescription
node Node object Required. The node object to append

The appendChild() method returns a Node Object representing the appended node.




PreviousNext

Related