Logo Media Nauka
Sklep naukowy

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>
Otwórz Pobierz


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>
Otwórz Pobierz


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>
Otwórz Pobierz


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>
Otwórz Pobierz


© medianauka.pl, 2016-11-11, ART-3285






Inne zagadnienia z tej lekcji




Polecamy koszyk



© Media Nauka 2008-2017 r.