Insertar elementos después de otros en javascript

Elementos después de los nodos existentes es una operación común en JavaScript. Sin embargo, mientras existe el método InsertBore (), solo puede agregar elementos antes de un nodo de referencia. Para insertar elementos después, necesitamos un enfoque alternativo.

Solución sin bibliotecas

para insertar un elemento tras otro sin usar bibliotecas, podemos usar el siguiente código:

referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

referenceNode: El elemento después de que queremos insertar el nuevo nodo.

• parentNode: el elemento principal de referenceNode.
• nextSibling: el próximo hermano de referenceNode, que será nulo si la referencia de referenceNode es el último hijo. ReferenceNode es el último niño, el NextSiBling será nulo. InsertBefore maneja este caso agregando el nuevo nodo al final de la lista.
reutilizable Función

podemos envolver esta funcionalidad en una función reutilizable:

InsertAfter (referenceNode, NewNode) { referencenode.parentnode.insertbefore (newnode, referenceNode.nextSibling); }

Ejemplo

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

Para probar esta función, podemos usar el siguiente fragmento:

function InsertAfter (referenceNode, NewNode) { referencenode.parentnode.insertbefore (newnode, referenceNode.nextSibling); } var el = document.createElement ("span"); el.innerhtml = "prueba"; var div = document.getElementById ("foo"); InsertAfter (div, el);

esto creará un nuevo elemento de span con el texto "Test" e insértelo después del elemento DIV con el ID "foo".