Kurs obiektowego JavaScript (31)

Autor: Damian Chodorek • Opublikowany: 25 października 2014 • Ostatnia aktualizacja: 8 lutego 2015 • Kategoria: javascript, kursy

Wstawianie, usuwanie i zamiana węzłów.

Wiesz już jak edytować zawartość węzłów. Przydałaby się teraz umiejętność tworzenia nowych. W tym celu należy skorzystać z metod createElement() oraz createTextNode(). Dzięki nim stworzysz nowy węzeł, który będziesz mógł dokleić do już istniejącego, przy pomocy appendChild().

var np=document.createElement('p');
np.innerHTML="nowy akapit";
np.style.color="purple";

document.body.appendChild(np);

//inny sposób:
var np2=document.createElement('p');
var tn=document.createTextNode("kolejny akapit");
np2.style.color="cyan";
np2.appendChild(tn);
document.body.appendChild(np2);

Kolejnym sposobem tworzenia węzłów jest kopiowanie już istniejących, przy pomocy metody cloneNode(). Do metody należy przekazać parametr true lub false, który odpowiada za głęboką (razem z potomkami) lub płytką (bez potomków) kopię.

var p1=document.getElementsByTagName('p')[0];
document.body.appendChild( p1.cloneNode(true) ); //doklejamy kopię

Jak zauważyłeś appendChild() wstawia nowe węzły na koniec. Żeby wstawić je na początek, korzystamy z insertBefore(). Jako drugi parametr, metoda przyjmuje element, przed którym ma zostać wstawiony nowy węzeł.

document.body.insertBefore(
  document.createTextNode("czysty tekst"),
  document.body.firstChild.nextSibling
); //węzeł zostanie wstawiony przed drugim potomkiem body

Usuwanie węzłów

Służy do tego metoda removeChild().

//wygenerujmy jakąś zawartość strony:
document.body.innerHTML="<p style=\"color: purple;\">nowy akapit</p>czysty tekst<p style=\"color: rgb(0, 255, 255);\">kolejny akapit</p><p style=\"color: purple;\">nowy akapit</p>";

var p1=document.getElementsByTagName('p')[0];
var rem=document.body.removeChild(p1);
rem;

Istnieje również metoda replaceChild(), która zamienia stary węzeł na nowy.

document.body.innerHTML="<p style=\"color: purple;\">nowy akapit</p> <p style=\"color: rgb(0, 255, 255);\">kolejny akapit</p><p style=\"color: purple;\">nowy akapit</p>";

var p1=document.getElementsByTagName('p')[0];
var p2=document.getElementsByTagName('p')[1];
var repl=document.body.replaceChild(p1,p2); //do drugiego akapitu wstawimy pierwszy

W tym artykule to wszystko. Przejdź do następnej części:

Kurs obiektowego JavaScript (32)

Zobacz również
Kurs obiektowego JavaScript (29)Model DOM. Sposoby nawigowania po węzłach drzewa.
Kurs obiektowego JavaScript (30)Funkcje skrótowe. Edycja elementów DOM.
Kurs obiektowego JavaScript (32)Omówienie obiektów skrótowych w JS.
Kurs obiektowego JavaScript (33)Obsługa zdarzeń. Model bąbelkowy.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.