insertbefore - Javascript Anexar Niño DESPUÉS del Elemento

insertbefore javascript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo insertar un elemento después de otro elemento en JavaScript sin usar una biblioteca? 17 respuestas

Me gustaría agregar un elemento li después de otro li dentro de un elemento ul usando javascript. Este es el código que tengo hasta ahora.

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";

Estoy familiarizado con appendChild,

parentGuest.appendChild(childGuest);

Sin embargo, esto añade el nuevo elemento dentro del otro, y no después. ¿Cómo puedo añadir el nuevo elemento después del existente? Gracias.

<ul>
  <li id="one"><!-- where the new li is being put --></li>
  <!-- where I want the new li -->
</ul>

Answer 1

después es ahora un método de JavaScript

Documentación MDN

Citando a MDN

El método ChildNode.after() inserta un conjunto de objetos Node o DOMString en la lista de hijos del padre de este ChildNode , justo después de este ChildNode . Los objetos DOMString se insertan como nodos de texto equivalentes.

El soporte del navegador es Chrome (54+), Firefox (49+) y Opera (39+). No es compatible con IE y Edge.

Retazo

var elm=document.getElementById(''div1'');
var elm1 = document.createElement(''p'');
var elm2 = elm1.cloneNode();
elm.append(elm1,elm2);

//added 2 paragraphs
elm1.after("This is sample text");
//added a text content
elm1.after(document.createElement("span"));
//added an element
console.log(elm.innerHTML);

<div id="div1"></div>

En el fragmento, también utilicé otro término.

Answer 2

Debe agregar el nuevo elemento al elemento primario existente antes del siguiente hermano del elemento. Me gusta:

var parentGuest = document.getElementById("one");
var childGuest = document.createElement("li");
childGuest.id = "two";
parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

O si quieres simplemente añadirlo, entonces:

var parentGuest = document.getElementById("one"); 
var childGuest = document.createElement("li"); 
childGuest.id = "two"; 
parentGuest.parentNode.appendChild(childGuest);

Answer 3

Esto basta:

 parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling || null);

ya que si el refnode (segundo parámetro) es nulo, se realiza un appendChild regular. Consulte aquí: http://reference.sitepoint.com/javascript/Node/insertBefore

En realidad dudo que el || null Se requiere || null , inténtalo y verás.

Answer 4

Puedes usar:

if (parentGuest.nextSibling) {
  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
}
else {
  parentGuest.parentNode.appendChild(childGuest);
}

Pero como Pavel señaló, el elemento de referencia puede ser nulo / indefinido, y si es así, insertBefore comporta como appendChild . Entonces lo siguiente es equivalente a lo anterior:

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Answer 5

Si está buscando una solución JS simple, simplemente use insertBefore() contra nextSibling .

Algo como:

parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);

Tenga en cuenta que el valor predeterminado de nextSibling es null , por lo tanto, no necesita hacer nada especial para eso.

Actualización: Ni siquiera necesita la verificación de la presencia de parentGuest.nextSibling como la respuesta actualmente aceptada, porque si no hay un próximo hermano, devolverá null , y pasará null al segundo argumento de insertBefore() significa: append at el fin.

Referencia:

• nextSibling
• insertBefore

.

SI está utilizando jQuery (ignore lo contrario, he indicado claramente la respuesta de JS anterior), puede aprovechar el conveniente método after() :

$("#one").after("<li id=''two''>");

Referencia:

• jQuery después de ()

Answer 6

Tambien podrias hacer

function insertAfter(node1, node2) {
    node1.outerHTML += node2.outerHTML;
}

o

function insertAfter2(node1, node2) {
    var wrap = document.createElement("div");
    wrap.appendChild(node2.cloneNode(true));
    var node2Html = wrap.innerHTML;
    node1.insertAdjacentHTML(''afterend'', node2Html);
}