 |
Agregar un nodo de tipo elemento en medio (insertBefore - createElement)
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>