El método appendChild () agrega un nodo como el último hijo de un nodo.
Sugerencia: Si desea crear un nuevo párrafo, con texto, recuerde crear el texto como un nodo Texto que anexa al párrafo, luego agregue el párrafo al documento. También puede utilizar este método para mover un elemento de un elemento a otro.
Consejo: utilice el método insertBefore () para insertar un nuevo nodo hijo antes de un nodo hijo existente especificado.

Sintaxis

element.appendChild(aChild);

Parámetros

aChild El nodo a adjuntar al nodo padre proporcionado (normalmente un elemento).

<!DOCTYPE html>
<html>
<body>
<ul id="myList">
  <li>Cafe</li>
  <li>Te</li>
</ul>
<p>Haga click en el botón para agregar un elemento al final de la lista.</p>
<button onclick="myFunction()">Probar</button>
<script>
function myFunction() {
  var node = document.createElement("LI");
  var textnode = document.createTextNode("Water");
  node.appendChild(textnode);
  document.getElementById("myList").appendChild(node);
}
</script>
<p><strong>Nota:</strong><br>Primero cree un nodo LI,
<br> luego crea un nodo de texto,<br>  luego agregue el nodo Text al nodo LI.
<br> Finalmente, agregue el nodo LI a la lista.
</p>
</body>
</html>

Ver ejemplo anterior

Ejemplo

Mover un elemento de la lista de una lista a otra:

<!DOCTYPE html>
<html>
<body>
<ul id="myList1"><li>Cafe</li><li>Te</li></ul>
<ul id="myList2"><li>Agua</li><li>Leche</li></ul>
<p>Haga clic en el botón para mover un elemento de una lista a otra..</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  var node = document.getElementById("myList2").lastChild;
  document.getElementById("myList1").appendChild(node);
}
</script>
</body>
</html>

Ver ejemplo anterior

Ejemplo Cree un elemento <p> y añádalo a un elemento <div>:

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Haga clic en el botón para crear un elemento P con algo de texto y agregarlo a DIV.</p>
<div id="myDIV">
A DIV element</div>
<button onclick="myFunction()">Try it</button>
<p><strong>Ejemplo explicado:</strong><br>Primero cree un nodo P, <br> 
luego cree un nodo Text, <br> luego agregue el nodo Text al nodo P. <br> 
Finalmente, obtenga el elemento DIV con id = "myDIV", y agregue el nodo P a DIV.</p>
<script>
function myFunction() {
  var para = document.createElement("P");
  var t = document.createTextNode("Este es un texto.");
  para.appendChild(t);
  document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>

Ver ejemplo anterior

(adsbygoogle = window.adsbygoogle || []).push({});

Agregar un nodo de tipo elemento (appendChild)