Tworzenie i usuwanie elementów (węzłów)

Potrafimy już odwołać się do poszczególnych elementów struktury dokumentu HTML, a nawet potrafimy odnaleźć jego rodziców i dzieci. W tym artykule pokażę, jak stworzyć, usunąć albo podmienić taki element.

Dodawanie węzłów - createElement

Aby stworzyć nowy element (węzeł) w strukturze DOM dokumentu HTML używamy metody document.createElement(typ), document.createTextNode(tekst), która tworzy taki węzeł, następnie umieszczamy nasz obiekt w hierarchii (drzewie) elementów za pomocą parentNode.appendChild(nowy_element) lub parentNode.insertBefore(element, beforeNode). Na koniec ustawiamy jeszcze styl dla naszego obiektu (jeśli trzeba).

Przykład 1 - Tworzenie nowego elementu

<script>
var tekst = document.createTextNode("Kliknij mnie, zostałem właśnie utworzony!");
var btn = document.createElement("BUTTON");
btn.appendChild(tekst);

var b = document.getElementsByTagName("body")[0];
b.appendChild(btn);
</script>

Co tu się dzieje? Najpierw tworzymy tekst za pomocą metody createTextNode(), następnie tworzymy węzeł typu BUTTON za pomocą createElement(). Przypisujemy węzeł tekst do węzła btn (teraz tekst będzie dzieckiem btn), ale jeszcze na ekranie nie zobaczymy wyniku. Musimy nasz przycisk przyłączyć do ciała <BODY></BODY> dokumentu. Szukamy za pomocą metody getElementByTagName("body")[0] węzła <body> (indeks [0] wskazuje na pierwszy znaleziony element) i teraz dodajemy za pomocą metody appendchild(btn) nasz przycisk do ciała dokumentu. Po co ten indeks [0]? Pamiętaj, że zawsze metoda getElementByTagName zwraca tablicę elementów!

Wstawianie węzłów w dowolne miejsce

Wstawić węzeł na końcu dokumentu nie jest zbyt trudno. Nieco trudniej jest wstawienie węzła w dowolne miejsce dokumentu. Wykorzystujemy tutaj metodę rodzic.insertBefore(element, węzeł), która do rodzica wstawia nowy element element przed elementem węzłem:

Przykład 2 - wstawianie węzła w środek dokumentu

Napiszemy skrypt, który dodaje na drugiej pozycji dodatkową pozycję listy.

Uwaga! Dodanie spacji do węzła <u> w pozycje <li> może spowodować niepożądane działanie skryptu, ze względu na zmianę indeksowania childNodes[]. Staraj się więc tutaj unikać spacji w kodzie HTML.

<body>
<ul id="mojaLista"><li>Gil</li><li>Wróbel</li><li>Sroka</li></ul>

<script>
var newItem = document.createElement("LI");
var textnode = document.createTextNode("Bażant");
newItem.appendChild(textnode);

var list = document.getElementById("mojaLista");
list.insertBefore(newItem, list.childNodes[1]);
</script>
</body>
</html>

Opiszemy co się tutaj po kolei dzieje. Najpierw tworzymy węzeł <li></li> - document.createElement("LI"), następnie tworzymy węzeł tekstowy - document.createTextNode("Bażant"), potem przypisujemy węzeł tekstowy jako dziecko do węzła <LI>. Potem pobieramy po id element <UL> i wstawiamy do węzła <UL>, przed jego drugie (childNodes[1]) dziecko nasz nowo utworzony węzeł.

Nie ma metody, która pozwala bezpośrednio wstawić element za danym węzłem. Trzeba samemu napisać odpowiednią funkcję z użyciem poznanych metod.

Usuwanie węzłów - removeChild

Do usuwania węzłów służy metoda removeChild(element). Jej stosowanie nie jest trudne. Trzeba tylko odnaleźć w strukturze DOM odpowiedni element.

Przykład 3 - Usuwanie elementów

W naszym przykładzie usuniemy drugi element listy nieuporządkowanej. Przycisk usuwania działa cały czas i cały czas usuwa drugi element listy.

<body>
 <ul id="mojaLista">
  <li>Gil</li><li>Sroka</li><li>Wróbel</li><li>Sikora</li><li>Dzwoniec</li>
 </ul>

<script>
 var lista = document.getElementById("mojaLista");
 lista.removeChild(lista.childNodes[1]);
</script>

</body>

Podmiana węzłów- replaceChild

Istnieje metoda za pomocą której w prosty sposób można podmienić węzły. Metoda ta nazywa się replaceChild(nowy_węzeł, stary_węzeł). Zobaczmy to na przykładzie.

Przykład 4 - podmiana węzłów

<body>
<ul id="mojaLista"><li>Gil</li><li>Kawka</li><li>Sikora</li></ul>

<script>
 var textnode = document.createTextNode("Wrona");
 var item = document.getElementById("mojaLista").childNodes[1];
 item.replaceChild(textnode, item.childNodes[0]);
</script>
</body>

Inne zagadnienia z tej lekcji

Document Object Model - DOM

Opis hierarchii dokumentu HTML. Oprócz tego, że przeglądarka wczytuje i wyświetla zawartość dokumentu HTML z użyciem arkuszy stylów CSS, dodatkowo zapamiętuje MODEL danego dokutemu.

Pobieranie elementów DOM

W jaki sposób w JavaScript można pobierać i modyfikować elementy struktury DOM strony internetowej? Służą do tego cztery właściwości w JavaScript: getElementById, getElementByTagName, querySelector i querySelectorAll.

Relacje między elementami DOM

Opis relacji miedzy węzłami w strukturze DOM w Javascript. Zobaczymy jakie zachodzą relacje miedzy tymi elementami. Artykuł zawiera listę właściwości węzłów i przykłady ich stosowania.

Modyfikowanie elementów

Opis metod modyfikowania elementów strony przy użyciu JavaScript. W tym artykule pokazuję kilka metod modyfikacji elementów strony internetowej z poziomu skryptu.