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

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

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

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.

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.

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.

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

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

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>

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.

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

También puede usar unshift () para anteponer a una lista

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