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

150

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

Yosef
źródło
1
Nie rozumiem, co masz na myśli.
Pekka
@GenericTypeTea: Więc ja też mniej więcej w tym samym czasie ... Zostawię to teraz w spokoju!
Mark Byers
@Mark - Twoja edycja była lepsza :).
djdd87

Odpowiedzi:

147

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

Grumdrig
źródło
7
więc prepend jest w zasadzie to wtedyfunction prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Muhammad Umer
166

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.

Poklepać
źródło
Dzięki, dlaczego do dodawania z wyprzedzeniem po prostu użyj insertBefore bez tworzenia dodatkowego div? jak odpowiedź Grumdriga?
Yosef
to tworzy element i dodaje go do domeny, dołącza i poprzedza pracę w inny sposób
Andrei Cristian Prodan,
Dostaję to w porównaniu z odpowiedzią Grumdiga
andrew
10
Jest rok 2015. Czy możemy już mieć wbudowaną prepend()metodę?
1,21 gigawata
Node.append lub node.appendChild to metody void, zamiast tego użyj insertBefore (node, null)
Suhayb
28

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.

Munzilla
źródło
Fajnie, właśnie to, czego szukałem.
Andrei Cristian Prodan
2
@Munzilla Ta metoda zmusi przeglądarkę do ponownego przeanalizowania wszystkich istniejących elementów podrzędnych. W powyższych rozwiązaniach Browser wystarczy dołączyć dane dziecko do dokumentu.
Sayam Qazi
12

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.

artur grzesiak
źródło
insertAdjacentHTMLnie zachowuje słuchaczy…” Jakich słuchaczy? To HTML, więc nie ma jeszcze żadnych elementów do powiązania. Jeśli odnosisz się do istniejących elementów wewnątrz foo, to nie jest to prawda. Chodzi o .insertAdjacentHTMLto, że chroni słuchaczy. Być może myślisz o tym .innerHTML += "...", co niszczy stare węzły DOM.
spanky
@spanky Masz rację, że stwierdzenie może być interpretowane na wiele sposobów, tak naprawdę miałem na myśli nowo utworzone węzły DOM z insertAdjacentHTML(nie korzeń ani istniejący potomkowie korzenia)
artur grzesiak
6

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>`);
Raza
źródło
5

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);
moka
źródło
1
co jeśli węzeł nie ma węzłów podrzędnych? W takim przypadku firstChild będzie zerowe
felixfbecker
prepend już istnieje, zobacz ParentNode.prepend (), więc aby zrobić prependChild wystarczy wywołać prnt.prepend (chld)
Igor Fomenko
2

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>
JamesH
źródło
1

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.

akiespenc
źródło
0
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

b3wii
źródło
0

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

Steve Freed
źródło
-1

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);
Güven Altuntaş
źródło