Agregar un nodo de tipo elemento en medio (insertBefore - createElement)

En caso que necesitemos agregar un nodo entre varios que se encuentran en el mismo nivel, el método appendChild no nos servirá. Para estos casos tenemos el método insertBefore que inserta un nodo previo a otro que le pasamos como referencia en el segundo parámetro.ndo parámetro.

Método insertBefore()

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

El método insertBefore() inserta un nodo como hijo, justo antes de un hijo existente, que usted especifica.
Sugerencia: Si desea crear un nuevo elemento de lista, con texto, recuerde crear el texto como un nodo de texto que agrega al elemento <li>, luego inserte </li> en la lista. También puede utilizar el método insertBefore para insertar / mover un elemento existente

Sintaxis

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

Parámetros

  • insertedNode El nodo que esta siendo insertado, es decir, newNode
  • parentNode El padre del nodo recién insertado.
  • newNode El nodo a insertar.
  • referenceNode El nodo antes del cual se inserta newNode.


Ejemplo

Inserte un nuevo elemento <li> antes del primer elemento secundario de un elemento <ul>:

<!DOCTYPE html>
<html>
<body>
<ul id="myList">
  <li>Cafe</li>
  <li>Te</li>
</ul>
<p>

Haga clic en el botón para insertar un elemento en la lista.</p>
<button onclick="myFunction()">Porbar</button>
<p><strong>Ejemplo explicado:</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, inserte el nodo LI antes del primer nodo hijo de la lista.</p>

<script>
function myFunction() {
  var newItem = document.createElement("LI");
  var textnode = document.createTextNode("Agua");
  newItem.appendChild(textnode);
  var list = document.getElementById("myList");
  list.insertBefore(newItem, list.childNodes[0]);
}
</script>
</body>
</html>

Ejemplo

Mover un elemento <li> 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>Click the button to move an item from one list to another</p>
<button onclick="myFunction()">Probar</button>

<script>
function myFunction() {
  var node = document.getElementById("myList2").lastChild;
  var list = document.getElementById("myList1");
  list.insertBefore(node, list.childNodes[0]);
}
</script>
</body>
</html>