¿Cómo puedo implementar anteponer y agregar con JavaScript normal?


Respuestas:


147

Quizás estés preguntando sobre los métodos DOM appendChild y insertBefore.

parentNode.insertBefore(newChild, refChild)

Inserta el nodo newChildcomo hijo de parentNodeantes del nodo hijo existente refChild. (Devoluciones newChild)

Si refChildes nulo, newChildse agrega al final de la lista de elementos secundarios. De manera equivalente y más legible, use parentNode.appendChild(newChild).


77
así que, básicamente, esto es básicamente esto entoncesfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Muhammad Umer

166

Aquí hay un fragmento para comenzar:

theParent = document.getElementById("theParent");
theKid = document.createElement("div");
theKid.innerHTML = 'Are we there yet?';

// append theKid to the end of theParent
theParent.appendChild(theKid);

// prepend theKid to the beginning of theParent
theParent.insertBefore(theKid, theParent.firstChild);

theParent.firstChildnos dará una referencia al primer elemento dentro theParenty lo pondremos theKidantes.


Gracias, ¿por qué para anteponer simplemente use insertBefore sin crear div adicional? como la respuesta de Grumdrig?
Yosef

esto crea un elemento y lo agrega al dom, agrega y antepone el trabajo de manera diferente
Andrei Cristian Prodan

Consigo éste en comparación con la respuesta de Grumdig
Andrew

10
Es 2015. ¿Podemos tener un prepend()método incorporado todavía?
1.21 gigavatios

Node.append o node.appendChild son métodos nulos, use insertBefore (node, null) en su lugar
Suhayb

28

No nos diste mucho para seguir aquí, pero creo que solo estás preguntando cómo agregar contenido al principio o al final de un elemento. Si es así, así es como puedes hacerlo con bastante facilidad:

//get the target div you want to append/prepend to
var someDiv = document.getElementById("targetDiv");

//append text
someDiv.innerHTML += "Add this text to the end";

//prepend text
someDiv.innerHTML = "Add this text to the beginning" + someDiv.innerHTML;

Muy fácil.


Bien, justo lo que estaba buscando.
Andrei Cristian Prodan

2
@Munzilla Este método obligará al navegador a analizar todos los elementos secundarios existentes nuevamente. En las soluciones anteriores, el navegador solo tiene que adjuntar el niño dado al documento.
Sayam Qazi

12

Si desea insertar una cadena HTML sin procesar, por compleja que sea, puede usar: insertAdjacentHTMLcon el primer argumento apropiado:

'beforebegin' Antes del elemento en sí. 'afterbegin' Justo dentro del elemento, antes de su primer hijo. 'beforeend' Justo dentro del elemento, después de su último hijo. 'afterend' Después del elemento en sí.

Sugerencia: siempre puedes llamar Element.outerHTML para obtener la cadena HTML que representa el elemento a insertar.

Un ejemplo de uso:

document.getElementById("foo").insertAdjacentHTML("beforeBegin",
          "<div><h1>I</h1><h2>was</h2><h3>inserted</h3></div>");

MANIFESTACIÓN

Precaución: insertAdjacentHTML no preserva a los oyentes con los que está conectado .addEventLisntener.


" insertAdjacentHTMLno preserva a los oyentes ..." ¿Qué oyentes? Es HTML, por lo que todavía no hay elementos para vincular. Si te referías a elementos existentes en el interior foo, entonces esa no es una declaración verdadera. El punto .insertAdjacentHTMLes que preserva a los oyentes. Tal vez estás pensando .innerHTML += "...", lo que destruye los viejos nodos DOM.
spanky

@spanky Tienes razón, esa afirmación puede interpretarse de múltiples maneras, lo que realmente quise decir eran los nodos DOM recién creados insertAdjacentHTML(no la raíz ni los descendientes existentes de la raíz)
artur grzesiak

6

Agregué esto en mi proyecto y parece funcionar:

HTMLElement.prototype.prependHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    this.insertBefore(div, this.firstChild);
};

HTMLElement.prototype.appendHtml = function (element) {
    const div = document.createElement('div');
    div.innerHTML = element;
    while (div.children.length > 0) {
        this.appendChild(div.children[0]);
    }
};

Ejemplo:

document.body.prependHtml(`<a href="#">Hello World</a>`);
document.body.appendHtml(`<a href="#">Hello World</a>`);

5

Para simplificar tu vida puedes extender el HTMLElementobjeto. Puede que no funcione para navegadores antiguos, pero definitivamente te hace la vida más fácil:

HTMLElement = typeof(HTMLElement) != 'undefined' ? HTMLElement : Element;

HTMLElement.prototype.prepend = function(element) {
    if (this.firstChild) {
        return this.insertBefore(element, this.firstChild);
    } else {
        return this.appendChild(element);
    }
};

Así que la próxima vez puedes hacer esto:

document.getElementById('container').prepend(document.getElementById('block'));
// or
var element = document.getElementById('anotherElement');
document.body.prepend(div);

1
¿Qué pasa si el nodo no tiene nodos secundarios? En ese caso, firstChild será nulo
felixfbecker

prepend ya existe, vea ParentNode.prepend (), por lo que para hacer prependChild es suficiente llamar a prnt.prepend (chld)
Igor Fomenko

2

Aquí hay un ejemplo del uso de anteponer para agregar un párrafo al documento.

var element = document.createElement("p");
var text = document.createTextNode("Example text");
element.appendChild(text);
document.body.prepend(element);

resultado:

<p>Example text</p>

1

En 2017 , sé que para Edge 15 e IE 12, el método de anteponer no se incluye como una propiedad para elementos Div, pero si alguien necesita una referencia rápida para polyfill una función, hice esto:

 HTMLDivElement.prototype.prepend = (node, ele)=>{ 
               try { node.insertBefore(ele ,node.children[0]);} 
                     catch (e){ throw new Error(e.toString()) } }

Función de flecha simple que es compatible con la mayoría de los navegadores modernos.


0
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

Si referenceElement es nulo o no está definido, newElement se inserta al final de la lista de nodos secundarios.

insertedElement The node being inserted, that is newElement
parentElement The parent of the newly inserted node.
newElement The node to insert.
referenceElement The node before which newElement is inserted.

Se pueden encontrar ejemplos aquí: Node.insertBefore



-1

Esta no es la mejor manera de hacerlo, pero si alguien quiere insertar un elemento antes que todo, aquí hay una manera.

var newElement = document.createElement("div");
var element = document.getElementById("targetelement");
element.innerHTML = '<div style="display:none !important;"></div>' + element.innerHTML;
var referanceElement = element.children[0];
element.insertBefore(newElement,referanceElement);
element.removeChild(referanceElement);
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.