¿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 de otro elemento sin usar jQuery u otra biblioteca?

542
25 янв. fijado por Xah Lee el 25 de enero 2011-01-25 15:39 '11 a las 15:39 2011-01-25 15:39
@ 18 respuestas
 referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 

Donde referenceNode es el nodo al que desea poner newNode después. Si el insertBefore referenceNode es el último hijo de su padre, esto está bien, porque referenceNode.nextSibling es null e insertBefore controla agregando al final de la lista.

Entonces

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

Prueba aqui

950
25 янв. la respuesta es dada por karim79 25 jan. 2011-01-25 15:42 '11 a las 15:42 2011-01-25 15:42

El JavaScript simple será el siguiente:

Añadir a

 element.parentNode.insertBefore(newElement, element); 

Añadir después de:

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

Pero, ejecute algunos prototipos allí para facilitar su uso.

Al crear los siguientes prototipos, puede llamar a esta función directamente desde los elementos recién creados.

  • newElement.appendBefore(element);

  • newElement.appendAfter(element);

border=0

.appendBefore (elemento) Prototipo

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

.appendAfter (elemento) Prototipo

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

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

 div { text-align: center; } #Neighborhood { color: brown; } #NewElement { color: green; } 
Ejecutarlo en JSFiddle 

46
21 авг. Se da la respuesta de Armando el 21 de agosto. 2015-08-21 11:05 '15 a las 11:05 a.m. 2015-08-21 11:05

Una búsqueda rápida en Google muestra 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 next sibling. parent.insertBefore(newElement, targetElement.nextSibling); } } 
31
25 янв. La respuesta la da James Long el 25 de enero. 2011-01-25 15:43 '11 a las 15:43 2011-01-25 15:43

insertAdjacentHTML + outerHTML

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

igualar

  • SECADOR: no es necesario almacenar el nodo anterior en una variable y usarlo dos veces. Si cambia el nombre de una variable, entonces con una apariencia más pequeña para el cambio.
  • el golf es mejor que insertBefore (una ruptura, incluso si el nombre existente del nodo variable es de 3 caracteres)

Desventajas:

  • soporte inferior del navegador: más adelante: https://caniuse.com/#feat=insert-adjacent
  • pierde propiedades de elementos, como eventos, porque outerHTML convierte un elemento en una cadena. Necesitamos esto porque insertAdjacentHTML agrega contenido de cadenas, no elementos.
27
11 мая '14 в 8:56 2014-05-11 08:56 Respuesta dada por Ciro Santilli 改造 改造 中心 六四 事件 事件 11 de mayo, 14 a las 8:56 2014-05-11 08:56

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

donde nodo1 y nodo2 son nodos DOM.

.after() es un método muy nuevo [1] , por lo que la compatibilidad con el navegador puede ser un problema.

7
27 окт. La respuesta la da golopot el 27 de octubre. 2016-10-27 10:55 '16 a las 10:55 2016-10-27 10:55

Aunque insertBefore() (vea MDN ) insertBefore() y se refiere a la mayoría de las respuestas aquí. Para una mayor flexibilidad y un uso más claro, puede utilizar:

insertAdjacentElement () (vea MDN ). Esto le permite referirse a cualquier elemento e insertar un elemento reubicable donde desee:

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

Otros deberían considerar casos de uso similares: insertAdjacentHTML() e insertAdjacentText()

Recomendaciones:

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

6
27 апр. La respuesta se da poco menos 27 de abril. 2018-04-27 19:01 '18 a las 7:01 pm 2018-04-27 19:01

O simplemente puedes hacer:

 referenceNode.parentNode.insertBefore( newNode, referenceNode ) referenceNode.parentNode.insertBefore( referenceNode, newNode ) 
4
28 мая '15 в 12:05 2015-05-28 12:05 la respuesta se da olvlvl 28 de mayo de 15 a 12:05 2015-05-28 12:05

Paso 1. Preparar los elementos:

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

Paso 2. Añadir después de:

 elementParent.insertBefore(newElement, element.nextSibling); 
4
03 дек. La respuesta la da Malik Khalil 03 dic. 2016-12-03 23:14 '16 a las 23:14 2016-12-03 23:14

El gran Dustin Díaz escribió sobre esto en su publicación, analizándolo y ofreciendo el código en la primera respuesta con cambios menores:

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

2
18 февр. La respuesta la da Yoni el 18 de febrero. 2016-02-18 12:42 '16 a las 12:42 pm 2016-02-18 12:42

insertBefore () se utiliza como parentNode.insertBefore() . Para imitar esto y hacer el 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 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 la extensión DOM puede no ser la mejor solución para usted, como se indica en este artículo .

Hovewer, este artículo fue escrito en 2010, y ahora todo podría ser diferente. Así que decide el tuyo.

JavaScript DOM insertAfter () method @ jsfiddle.net

2
07 апр. la respuesta la da Dmytro Dzyubak 07 abr. 2015-04-07 13:06 '15 a las 13:06 2015-04-07 13:06

Idealmente, insertAfter debería funcionar como insertBefore . El siguiente código ejecutará lo siguiente:

  • Si no hay hijos, Node agrega un nuevo Node .
  • Si no hay un enlace de Node , Node agrega un nuevo Node .
  • Si no hay Node después del enlace Node , Node agrega un nuevo Node .
  • Si el enlace del Node tiene descendientes, entonces el nuevo Node inserta antes de este hermano
  • Devuelve un nuevo Node

Extensión de Node

 Node.prototype.insertAfter = function(node, referenceNode) { if (node) this.insertBefore(node, referenceNode  referenceNode.nextSibling); return node; }; 

Un ejemplo comun

 node.parentNode.insertAfter(newNode, node); 

Ver codigo

 <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
14 янв. La respuesta la da Darlesson el 14 de enero. 2017-01-14 01:51 '17 a la 1:51 2017-01-14 01:51

Implementación confiable de Insertar después.

 // source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) { function isNode(node) { return node instanceof Node; } if(arguments.length < 2){ throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present.")); } if(isNode(newNode)){ if(referenceNode === null || referenceNode === undefined){ return this.insertBefore(newNode, referenceNode); } if(isNode(referenceNode)){ return this.insertBefore(newNode, referenceNode.nextSibling); } throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'.")); } throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'.")); 

};

0
15 янв. la respuesta es dada por jszhou 15 de enero 2017-01-15 06:58 '17 a las 6:58 2017-01-15 06:58

Este código está destinado a insertar el elemento de enlace inmediatamente después del último elemento secundario existente en el archivo adjunto de un archivo css pequeño.

 var raf, cb=function(){ //create newnode var link=document.createElement('link'); link.rel='stylesheet';link.type='text/css';link.href='css/style.css'; //insert after the lastnode var nodes=document.getElementsByTagName('link'); //existing nodes var lastnode=document.getElementsByTagName('link')[nodes.length-1]; lastnode.parentNode.insertBefore(link, lastnode.nextSibling); }; //check before insert try { raf=requestAnimationFrame|| mozRequestAnimationFrame|| webkitRequestAnimationFrame|| msRequestAnimationFrame; } catch(err){ raf=false; } if (raf)raf(cb); else window.addEventListener('load',cb); 
0
09 апр. La respuesta se da Chetabahana 09 de abril. 2015-04-09 06:12 '15 a las 6:12 2015-04-09 06:12

Sé que esta pregunta ya tiene demasiadas respuestas, pero ninguna de ellas cumplió con mis requisitos exactos.

Necesito una función que tenga el comportamiento opuesto exacto de parentNode.insertBefore , es decir, debe aceptar un cero de referenceNode (que no se acepta en la respuesta ) y donde insertBefore se insertará al final de insertBefore que se debe insertar al principio, de lo contrario no sería capaz de insertar en la ubicación original con esta función; Por el mismo motivo, insertBefore inserta al final.

Dado que un cero referenceNode requiere que se insertBefore padre, necesitamos saber que el padre - insertBefore es el método del parentNode , por lo que tiene acceso al parentNode principal de esta manera; No existe nuestra función, por lo que necesitamos pasar el parámetro principal como parámetro.

La función resultante se ve así:

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

O (si es necesario, no lo recomiendo), puede, por supuesto, mejorar el prototipo de Node :

 if (! Node.prototype.insertAfter) { Node.prototype.insertAfter = function(newNode, referenceNode) { this.insertBefore( newNode, referenceNode ? referenceNode.nextSibling : this.firstChild ); }; } 
0
20 июля '18 в 10:17 2018-07-20 10:17 La respuesta se da a mindplay.dk el 20 de julio de '18 a las 10:17.

Permite procesar todos los scripts.

  function insertAfter(newNode, referenceNode) { if(referenceNode  referenceNode.nextSibling  referenceNode.nextSibling.nodeName == '#text') referenceNode = referenceNode.nextSibling; if(!referenceNode) document.body.appendChild(newNode); else if(!referenceNode.nextSibling) document.body.appendChild(newNode); else referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } 
0
11 апр. La respuesta es dada por Sami el 11 de abril. 2018-04-11 13:13 '18 a las 13:13 2018-04-11 13:13
 if( !Element.prototype.insertAfter ) { Element.prototype.insertAfter = function(item, reference) { if( reference.nextSibling ) reference.parentNode.insertBefore(item, reference.nextSibling); else reference.parentNode.appendChild(item); }; } 
0
13 июня '18 в 17:06 2018-06-13 17:06 La respuesta la da yavuzkavus el 13 de junio de 18 a las 17:06 2018-06-13 17:06
  <!DOCTYPE html> <html > 
0
14 окт. respuesta dada por Kunal Awasthi 14 oct. 2016-10-14 12:27 '16 a las 12:27 pm 2016-10-14 12:27

Puede utilizar la función appendChild para insertar después del elemento.

Enlace: http://www.w3schools.com/jsref/met_node_appendchild.asp

0
14 дек. La respuesta la da Doug LN el 14 de diciembre. 2016-12-14 15:12 '16 a las 15:12 2016-12-14 15:12

Otras preguntas acerca de las etiquetas o hacer una pregunta