Jaka jest różnica między appendChild, insertAdjacentHTML i innerHTML

Question

Chcę wiedzieć jaka jest różnica między appendChild, insertAdjacentHTML i innerHTML.

Sądzę, że ich funkcjonalność jest podobna, ale chcę jasno zrozumieć termin użytkowania, a nie szybkość wykonania.

1. Na przykład, można użyć innerHTML wstawić nowy znak lub tekst w innym tagu w HTML, ale zastępuje aktualną zawartość tego znacznika zamiast dopisuje.

2. Jeśli chciałbym zrobić to w ten sposób (nie zastąpić) muszę korzystać insertAdjacentHTML i mogę zarządzać gdzie chcę, aby wstawić nowy element (beforebegin, afterbegin, beforeend, afterend)

3. a ostatnia, jeśli chcę utworzyć (nie wstawić w bieżącym tagu) nowy znacznik i wstawić go do HTML, muszę użyć appendChild.

---

Am I zrozumienia go poprawnie? Czy jest jakaś różnica między tymi trzema?

Answer 1

Jeden, który znam innerHTML może pobrać "wewnętrzny html", appendChild i insertAdjacentHTML nie może;

przykład:

<div id="example"><p>this is paragraph</p><div> 

JS:

var foo = document.getElementById('example').innerHTML; 

końcowych to teraz

foo = '<p>this is paragraph</p>'; 

Answer 2

dokumentów:

appendChild

insertAdjacentHTML

innerHtml

innerHTML vs appendChild() performance

insertAdjacentHTML vs innerHTML vs appendChild performance

Answer 3

The appendChild metody wprowadza element do DOM.

Metoda innerHTML i metoda insertAdjacentHTML pobiera ciąg zamiast elementu, więc muszą sparsować ciąg i utworzyć z niego elementy, zanim będą mogły zostać wstawione do DOM.

Właściwość innerHTML może być używana zarówno do pobierania, jak i ustawiania kodu HTML dla zawartości elementu.

Answer 4

• element.innerHTML

  Od MDN:

  zestawy InnerHTML lub dostaje składni HTML opisujący potomków elementu.

  pisząc do innerHTML, będzie go zastąpić zawartość elementu źródłowego. Oznacza to, że HTML musi zostać załadowany i ponownie przeanalizowany. Nie jest to szczególnie efektywne, szczególnie w przypadku korzystania z pętli wewnętrznych.

• node.appendChild

  Od MDN:

  Dodaje węzeł na końcu listy dzieci określonego węzła nadrzędnego. Jeśli węzeł już istnieje, zostanie usunięty z bieżącego węzła nadrzędnego, a następnie dodany do nowego węzła nadrzędnego.

  Ta metoda jest obsługiwana przez wszystkie przeglądarki i jest znacznie czystszym sposobem wstawiania węzłów, tekstu, danych itp. Do DOM.

• element.insertAdjacentHTML

  Od MDN:

  analizuje podany tekst jako HTML lub XML i wstawia wynikających węzły do ​​drzewa DOM w określonym położeniu. [...]

  Ta metoda jest również obsługiwana przez wszystkie przeglądarki.

Answer 5

@Guffa wyjaśnił główną różnicę, tj. InnerHTML i insertAdjacentHTML, aby przeanalizować ciąg przed dodaniem do DOM.

Ponadto zobacz ten jsPerf, który powie, że ogólnie appendChild jest szybszy dla zadania, które zapewnia.