validacion - validar nombre javascript

¿Cómo puedo implementar anexar y anexar JavaScript regular?

Question

¿Cómo puedo implementar append y append JavaScript regular sin usar jQuery?

Answer 1

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

Answer 2

Aquí hay un ejemplo de cómo usar prepend 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>

Answer 3

Aquí hay un fragmento para que empieces:

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.firstChild nos dará una referencia al primer elemento dentro de theParent y pondrá theKid antes de él.

Answer 4

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

Answer 5

No nos dio mucho para seguir aquí, pero creo que solo está preguntando cómo agregar contenido al principio o al final de un elemento. Si es así, así es cómo 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.

Answer 6

Para simplificar su vida, puede extender HTMLElement . Puede que no funcione en navegadores antiguos, pero definitivamente hace su vida más fácil:

HTMLElement = typeof(HTMLElement) != ''undefiend'' ? 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 que puedas hacer esto:

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

Answer 7

Si desea insertar una cadena de HTML sin procesar sin importar cuán compleja sea, puede usar: insertAdjacentHTML , con 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 puede llamar a Element.outerHTML para obtener la cadena HTML que representa el elemento que se insertará.

Un ejemplo de uso:

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

DEMO

Precaución: insertAdjacentHTML no preserva los escuchas que .addEventLisntener adjuntos con .addEventLisntener .

Answer 8

anteponer sin JQuery:

parent.insertBefore(child, parent.firstChild);

Actualizar

Chrome , Firefox y Safari (WebKit) son compatibles con prepend .

parentNode.prepend(child);

Answer 9

En 2017 , sé que para Edge 15 e IE 12, el método prepend no está incluido como una propiedad para elementos Div, pero si alguien necesita una referencia rápida a 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.

Answer 10

Tal vez está preguntando sobre los métodos DOM appendChild e insertBefore .

parentNode.insertBefore(newChild, refChild)

Inserta el nodo newChild como hijo de parentNode antes del nodo secundario existente refChild . (Devuelve newChild )

Si refChild es nulo, se agrega newChild al final de la lista de elementos newChild . De forma equivalente y más legible, use parentNode.appendChild(newChild) .

Answer 11

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

Si referenceElement es nulo o indefinido, 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.

Los ejemplos se pueden encontrar aquí: Node.insertBefore