logo

Použijte appendChild() v JavaScriptu k přidání prvků stránky [Příklady]

 Node.appendChild() metoda přidá na stránku nový HTML Element (přes DOM). Tento článek vám ukáže, jak jej používat.

DOM v JavaScriptu

HTML DOM (Document Object Model) je rozhraní, které JavaScript používá ke čtení a interakci s prvky HTML stránky.

Je to datová struktura, která představuje každou značku HTML přítomnou na stránce – vše od kořenového prvku  , který obaluje vaši stránku, až po všechny 

, 

,  a  – vše na stránce je zastoupeno v DOM, obsah i struktura.

Každý prvek HTML je v modelu DOM reprezentován jako Uzel – abstrakce prvku na stránce.

Přidání/aktualizace modelu DOM

DOM umožňuje velmi pohodlně přidávat, odebírat a aktualizovat viditelné i neviditelné prvky HTML na stránce. Je to například ideální způsob, jak přidat řádky do tabulky nebo možnosti do rozevíracího seznamu z JavaScriptu na základě vstupu uživatele nebo načítaných dat.

syntaxe metody appendChild()

Metoda appendChild() musí být volána z objektu DOM Node a má následující syntaxi:

NODE.appendChild(CHILD);

Všimněte si, že:

  • NODE je uzel, ke kterému chcete připojit podřízený prvek
  • CHILD je podřízený prvek, který chcete připojit k NODE
  • Vrácená hodnota appendChild() je připojené CHILD Uzel
    • Pokud je připojený podřízený fragment dokumentu bez rodičů a místo toho se vrátí prázdný DocumentFragment

Přidávání prvků pomocí appendChild() – příklady

Chcete-li použít appendChild() Nejprve musíme mít HTML Element (který bude reprezentován v DOM), se kterým budeme pracovat. Dobrým příkladem je seznam, protože položky lze přidat pomocí appendChild() :

<ul id="my-list">
    <li>List item 1</li>
    <li>List item 2</li>
</ul>

Výše je vytvořen jednoduchý seznam HTML s id z mého seznamu .

Následující JavaScript přidá položku do seznamu pomocí appendChild() metoda:

var myList = document.getElementById('my-list');
var newListItem = document.createElement('li');
newListItem.innerText = 'List item 3';
myList.appendChild(newListItem);

Nejprve se pomocí getElementById() načte existující seznam v HTML DOM .

Potom se pomocí createElement() vytvoří nová položka seznamu . Toto je nový podřízený prvek, který bude připojen.

Text pro nový podřízený prvek se nastavuje nastavením innerText vlastnost.

Nakonec appendChild() lze použít k připojení nové položky seznamu jako podřízeného objektu existujícího seznamu můj-seznam .

Chcete-li podřízený prvek místo přidání odebrat, použijte místo něj removeChild().