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


Hay insertBefore() en JavaScript, pero ¿cómo puedo insertar un elemento después otro elemento sin usar jQuery u otra biblioteca?


512
2018-01-25 12:39


origen


Respuestas:


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

Dónde referenceNode es el nodo que quieres poner newNode después. Si referenceNode es el último hijo dentro de su elemento padre, está bien, porque referenceNode.nextSibling estarán null y insertBefore maneja ese caso al agregarlo al final de la lista.

Asi que:

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

Pruébalo aquí.


904
2018-01-25 12:42



JavaScript directo sería lo siguiente:

Agregar antes

element.parentNode.insertBefore(newElement, element);

Anexar después:

element.parentNode.insertBefore(newElement, element.nextSibling);

Pero, mezcla algunos prototipos para facilitar el uso

Al construir los siguientes prototipos, podrá invocar estas funciones directamente desde los elementos recién creados.

  • newElement.appendBefore(element); 

  • newElement.appendAfter(element);

.appendBefore (element) Prototype

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter (element) Prototype

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

Y, para verlo todo en acción, ejecute el siguiente fragmento de código

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;


/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';


/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));
div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}
<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

Ejecutarlo en JSFiddle


43
2017-08-21 08:05



Una rápida búsqueda en Google revela este script

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

30
2018-01-25 12:43



insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

Upsides:

  • DRYer: no tiene que almacenar el nodo anterior en una variable y usarlo dos veces. Si cambia el nombre de la variable, en menos ocurrencia para modificar.
  • golfs mejor que el insertBefore (punto de equilibrio si el nombre de la variable de nodo existente es de 3 caracteres de largo)

Desventajas:

  • menor compatibilidad con el navegador desde más nuevo: https://caniuse.com/#feat=insert-adjacent
  • perderá propiedades del elemento como eventos porque outerHTML convierte el elemento en una cadena. Lo necesitamos porque insertAdjacentHTML agrega contenido de cadenas en lugar de elementos.

24
2018-05-11 05:56



node1.after(node2) produce <node1/><node2/>,

donde node1 y node2 son nodos DOM.

.after() es un método muy nuevo [1], por lo que el soporte del navegador podría ser un problema.


6
2017-10-27 07:55



O simplemente puede hacer:

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

4
2018-05-28 09:05



Paso 1. Prepare los elementos:

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

Paso 2. Anexar después:

elementParent.insertBefore(newElement, element.nextSibling);

4
2017-12-03 20:14



El método insertBefore () se usa como parentNode.insertBefore(). Entonces imitar esto y hacer un método parentNode.insertAfter() podemos escribir el siguiente código

JavaScript

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

HTML

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

Tenga en cuenta que extender el DOM podría no ser la solución adecuada para usted como se indica en Este artículo.

Hovewer, este artículo fue escrito en 2010 y las cosas podrían ser diferentes ahora. Así que decide por ti mismo.

JavaScript DOM insertAfter () método @ jsfiddle.net


2
2018-04-07 10:06



El gran Dustin Díaz escribió esto en una publicación, analizándola y ofreciendo el código en la primera respuesta con ligeras modificaciones:

function insertAfter(parent, node, referenceNode) {

  parent.insertBefore(node, referenceNode.nextSibling);

}

http://www.dustindiaz.com/top-ten-javascript


2
2018-02-18 09:42



Idealmente insertAfter debería funcionar de manera similar insertBefore. El siguiente código realizará lo siguiente:

  • Si no hay hijos, el nuevo Node se adjunta
  • Si no hay referencia Node, el nuevo Node se adjunta
  • Si no hay Node después de la referencia Node, el nuevo Node se adjunta
  • Si hay la referencia Node tiene un hermano después, entonces el nuevo Node se inserta antes de ese hermano
  • Devuelve el nuevo Node

Extensión Node

Node.prototype.insertAfter = function(node, referenceNode) {

    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

Un ejemplo común

node.parentNode.insertAfter(newNode, node);

Ver el código en ejecución

// First extend
Node.prototype.insertAfter = function(node, referenceNode) {
    
    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

var referenceNode,
    newNode;

newNode = document.createElement('li')
newNode.innerText = 'First new item';
newNode.style.color = '#FF0000';

document.getElementById('no-children').insertAfter(newNode);

newNode = document.createElement('li');
newNode.innerText = 'Second new item';
newNode.style.color = '#FF0000';

document.getElementById('no-reference-node').insertAfter(newNode);

referenceNode = document.getElementById('no-sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Third new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);

referenceNode = document.getElementById('sibling-after');
newNode = document.createElement('li');
newNode.innerText = 'Fourth new item';
newNode.style.color = '#FF0000';

referenceNode.parentNode.insertAfter(newNode, referenceNode);
<h5>No children</h5>
<ul id="no-children"></ul>

<h5>No reference node</h5>
<ul id="no-reference-node">
  <li>First item</li>
</ul>

<h5>No sibling after</h5>
<ul>
  <li id="no-sibling-after">First item</li>
</ul>

<h5>Sibling after</h5>
<ul>
  <li id="sibling-after">First item</li>
  <li>Third item</li>
</ul>


1
2018-01-13 22:51



Aunque insertBefore() (ver MDN) es genial y hace referencia a la mayoría de las respuestas aquí. Para mayor flexibilidad, y para ser un poco más explícito, puede usar:

insertAdjacentElement () (ver MDN) Esto le permite hacer referencia a cualquier elemento e insertar el elemento que se va a mover exactamente donde lo desee:

<!-- refElem.insertAdjacentElement('beforebegin', moveMeElem); -->
<p>
<!-- refElem.insertAdjacentElement('afterbegin', moveMeElem); -->
... content ...
<!-- refElem.insertAdjacentElement('beforeend', moveMeElem); -->
</p>
<!-- refElem.insertAdjacentElement('afterend', moveMeElem); -->

Otros a considerar para casos de uso similares: insertAdjacentHTML() y insertAdjacentText()

Referencias

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText


1
2018-04-27 16:01