javascript - obtener - innerhtml que es

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

Question

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

Answer 1

Paso 1. Preparar elementos:

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

Paso 2. Añadir después:

elementParent.insertBefore(newElement, element.nextSibling);

Answer 2

JavaScript directo sería el siguiente:

Anexar antes:

element.parentNode.insertBefore(newElement, element);

Añadir después:

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

Pero, arroja algunos prototipos allí para facilitar su uso

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

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.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 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

Answer 3

Aunque insertBefore() (ver MDN ) es excelente y está referenciado por la mayoría de las respuestas aquí. Para mayor flexibilidad, y para ser un poco más explícito, puedes usar:

insertAdjacentElement () (ver developer.mozilla.org/en-US/docs/Web/API/Element/… ) Esto le permite hacer referencia a cualquier elemento e insertar el elemento a mover exactamente donde desee:

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

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

Referencias:

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

Answer 4

El método insertBefore () se utiliza como parentNode.insertBefore() . Entonces, para 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 puede 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 () method @ jsfiddle.net

Answer 5

Este código sirve para insertar un elemento de enlace justo después del último elemento secundario existente para inlining un pequeño archivo css

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);

Answer 6

Lo ideal sería que insertAfter funcione de forma similar a MDN . El siguiente código realizará lo siguiente:

• Si no hay hijos, se adjunta el nuevo Node
• Si no hay un Node referencia, se agrega el nuevo Node
• Si no hay Node después del Node referencia, se agrega el nuevo Node
• Si allí el Node referencia tiene un hermano posterior, entonces el nuevo Node se inserta antes que ese hermano
• Devuelve el nuevo Node

Node Extensor

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 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>

Answer 7

O simplemente puedes hacer:

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

Answer 8

Permite manejar todos los escenarios.

 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);            
    }

Answer 9

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

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

Answer 10

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

Quería una función que tenga el comportamiento opuesto exacto de parentNode.insertBefore , es decir, debe aceptar un nodo de referenceNode nulo (que la respuesta aceptada no tiene) y donde insertBefore se insertaría al final de los elementos insertBefore que este debe insertar al comienzo , ya que de lo contrario no habría forma de insertar en la ubicación de inicio con esta función; La misma razón insertBefore inserta al final.

Como un nodo de referenceNode nulo requiere que localice el padre, necesitamos saber el padre: insertBefore es un método del parentNode , por lo que tiene acceso al padre de esa manera; Nuestra función no, así que tendremos que 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), por supuesto, puede mejorar el prototipo de Node :

if (! Node.prototype.insertAfter) {
  Node.prototype.insertAfter = function(newNode, referenceNode) {
    this.insertBefore(
      newNode,
      referenceNode ? referenceNode.nextSibling : this.firstChild
    );
  };
}

Answer 11

Una implementación robusta de insertAfter.

// 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''."));

};

Answer 12

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);
    }
}

Answer 13

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

donde nodo1 y nodo2 son nodos DOM.

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

Answer 14

insertAdjacentHTML + outerHTML

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

Upsides:

• SECADOR: no tiene que almacenar el nodo anterior en una variable y usarlo dos veces. Si cambia el nombre de la variable, en menor ocurrencia para modificar.
• golfs mejor que el insertBefore (rompa incluso si el nombre de variable de nodo existente tiene 3 caracteres de longitud)

Desventajas:

• menor compatibilidad con el navegador desde más reciente: https://caniuse.com/#feat=insert-adjacent
• perderá las 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.

Answer 15

 <!DOCTYPE html>
 <html lang="ca">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function createDiv(){
            var newDiv = document.createElement("div");
            var txt = document.createTextNode("I''m the second div");
            newDiv.appendChild(txt);
            var x = document.getElementsByTagName("BODY")[0];
            x.insertBefore(newDiv, third);
        }
    </script>
</head>
<body>
    <div class="first">
        <p>
            I''m the first div
        </p>
    </div>
    <div id="third">
        <p>
            I''m the third div
        </p>
    </div>
    <button type= " button " name= " button " onclick = " createDiv() " >
        Create the second Div
    </button>
</body>
</html>

Answer 16

if( !Element.prototype.insertAfter ) {
    Element.prototype.insertAfter = function(item, reference) {
        if( reference.nextSibling )
            reference.parentNode.insertBefore(item, reference.nextSibling);
        else
            reference.parentNode.appendChild(item);
    };
}

Answer 17

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

Donde referenceNode es el nodo al que desea poner newNode después. Si referenceNode es el último hijo dentro de su elemento padre, está bien, porque referenceNode.nextSibling será null e insertBefore encarga de ese caso al agregarlo al final de la lista.

Asi que:

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

Pruébalo aquí.