Jak mogę zaimplementować dołączanie przed i dołączanie za pomocą zwykłego kodu JavaScript?

Jak mogę zaimplementować dołączanie przed i dołączanie za pomocą zwykłego JavaScript bez używania jQuery?

Być może pytasz o metody DOM appendChild i insertBefore.

parentNode.insertBefore(newChild, refChild)

Wstawia węzeł newChildjako dziecko parentNodeprzed istniejącym węzłem podrzędnym refChild. (Wraca newChild.)

Jeśli refChildjest null, newChildjest dodawane na końcu listy dzieci. Równoważnie i czytelniej użyj parentNode.appendChild(newChild).

Oto fragment, który pomoże Ci zacząć:

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.firstChildpoda nam odniesienie do pierwszego elementu wewnątrz theParenti umieści theKidgo przed nim.

Nie dałeś nam wiele do zrobienia, ale myślę, że pytasz tylko, jak dodać treść na początku lub na końcu elementu? Jeśli tak, oto jak możesz to zrobić dość łatwo:

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

Całkiem proste.

Jeśli chcesz wstawić nieprzetworzony ciąg HTML, bez względu na to, jak skomplikowany, możesz użyć:, insertAdjacentHTMLz odpowiednim pierwszym argumentem:

„beforebegin” Przed samym elementem. 'afterbegin' Tylko wewnątrz elementu, przed jego pierwszym dzieckiem. „beforeend” Tylko wewnątrz elementu, po jego ostatnim potomku . „afterend” Po samym elemencie.

Wskazówka: zawsze możesz wywołać Element.outerHTMLciąg znaków HTML reprezentujący element do wstawienia.

Przykład użycia:

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

PRÓBNY

Uwaga: insertAdjacentHTML nie chroni słuchaczy, którzy są dołączeni do .addEventLisntener.

Dodałem to do mojego projektu i wydaje się, że działa:

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

Przykład:

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

W celu ułatwienia sobie życia możesz przedłużyć HTMLElementobiekt. Może nie działać w starszych przeglądarkach, ale zdecydowanie ułatwia Ci życie:

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

Więc następnym razem możesz to zrobić:

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

Oto przykład użycia poprzedzania w celu dodania akapitu do dokumentu.

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

wynik:

<p>Example text</p>

W 2017 wiem, że dla Edge 15 i IE 12 metoda prepend nie jest uwzględniana jako właściwość dla elementów Div, ale jeśli ktoś potrzebuje szybkiego odniesienia do funkcji polyfill, zrobiłem to:

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

Prosta funkcja strzałek zgodna z większością nowoczesnych przeglądarek.

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

Jeśli referenceElement ma wartość null lub jest niezdefiniowana, newElement jest wstawiany na końcu listy węzłów podrzędnych.

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.

Przykłady można znaleźć tutaj: Node.insertBefore

Możesz także użyć unshift (), aby poprzedzić listę

Nie jest to najlepszy sposób, ale jeśli ktoś chce wstawić element przed wszystkim, oto sposób.

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