Jak mogę zaimplementować dołączanie przed i dołączanie za pomocą zwykłego JavaScript bez używania jQuery?
javascript
append
prepend
Yosef
źródło
źródło
Odpowiedzi:
Być może pytasz o metody DOM
appendChild
iinsertBefore
.źródło
function prepend(tag, ele) { var x =document.getElementsByTagName(tag)[0]; x.insertBefore(ele ,x.children[0]); }
Oto fragment, który pomoże Ci zacząć:
theParent.firstChild
poda nam odniesienie do pierwszego elementu wewnątrztheParent
i umieścitheKid
go przed nim.źródło
prepend()
metodę?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:
Całkiem proste.
źródło
Jeśli chcesz wstawić nieprzetworzony ciąg HTML, bez względu na to, jak skomplikowany, możesz użyć:,
insertAdjacentHTML
z odpowiednim pierwszym argumentem:Wskazówka: zawsze możesz wywołać
Element.outerHTML
ciąg znaków HTML reprezentujący element do wstawienia.Przykład użycia:
PRÓBNY
Uwaga:
insertAdjacentHTML
nie chroni słuchaczy, którzy są dołączeni do.addEventLisntener
.źródło
insertAdjacentHTML
nie 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ątrzfoo
, to nie jest to prawda. Chodzi o.insertAdjacentHTML
to, że chroni słuchaczy. Być może myślisz o tym.innerHTML += "..."
, co niszczy stare węzły DOM.insertAdjacentHTML
(nie korzeń ani istniejący potomkowie korzenia)Dodałem to do mojego projektu i wydaje się, że działa:
Przykład:
źródło
W celu ułatwienia sobie życia możesz przedłużyć
HTMLElement
obiekt. Może nie działać w starszych przeglądarkach, ale zdecydowanie ułatwia Ci życie:Więc następnym razem możesz to zrobić:
źródło
Oto przykład użycia poprzedzania w celu dodania akapitu do dokumentu.
wynik:
źródło
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:
Prosta funkcja strzałek zgodna z większością nowoczesnych przeglądarek.
źródło
Jeśli referenceElement ma wartość null lub jest niezdefiniowana, newElement jest wstawiany na końcu listy węzłów podrzędnych.
Przykłady można znaleźć tutaj: Node.insertBefore
źródło
Możesz także użyć unshift (), aby poprzedzić listę
źródło
Nie jest to najlepszy sposób, ale jeśli ktoś chce wstawić element przed wszystkim, oto sposób.
źródło