Potrafimy już poruszać się po elemetnach, potrafimy je pobrać, przechodzić z jednego na drugi itp. Czas zacząć je tworzyć a potem usuwać. Nie jest to wcale takie tródne. Wystarczy, że skorzystamy z kilku podstawowych metod oferowanych przez Javascript.
Aby utworzyć nowy element na stronie korzystamy z metody document.createElement(typ). Po utworzeniu nowego elementu musimy ustawić jego właściwości. Ale to nie wszystko. Utworzony w ten sposób element jest dostępny dla skryptu, ale nie ma go jeszcze w drzewie dokumentu. Musimy go tam wstawić metodą parent.appendChild(nowy_obiekt):
var element = document.createElement('div'); //tworzymy nowego Diva
element.id = 'bloczek';
element.style.width = '400px';
element.style.height = '200px';
element.style.backgroundColor = '#FF6633';
var body = document.getElementsByTagName('body')[0]; //pobieramy body
body.appendChild(element); //wstawiamy element do drzewa dokumentu
Po dodaniu elementu do drzewa pojawi się on na stronie.
Do wstawiania nodów w drzewo strony możemy też skorzystać z metody parentNode.insertBefore(wstawiany,przed_czym), która do parentNode wstawia wstawiany element przed elementem przed_czym:
<p id="insertB">
<strong>Jestem pierwszym nodem</strong>
</p>
<input type="button" id="guzik" value="wstaw noda" />
<script type="text/javascript">
function wstawPrzed() {
var p = document.getElementById('insertB'); //pobieramy element <p>
var strong = p.firstChild; //pobieramy pierwsze dziecko p czyli element <strong>
var nowyNod = document.createTextNode('Jestem innym nodem, '); //tworzymy nowy nod z tekstem
p.insertBefore(nowyNod,strong); //wstawiamy go przed <strong>
}
document.getElementById('guzik').onclick = wstawPrzed; //pobieramy przycisk i przypisujemy mu zdarznie onclick
</script>
Jestem pierwszym nodem
Czasami chcemy zamiast przed obiektem, wstawić coś za nim. Javascript nie posiada metody do tego służącej, więc musimy ją napisać sami:
Node.prototype.insertAfter = function(newNode) {
if(this.nextSibling) { //jezeli dany element ma za soba jakis obiekt
return this.parentNode.insertBefore(newNode, this.nextSibling); //to wstawiamy przed tym obiektem nasz element
} else {
return this.parentNode.appendChild(newNode);
}
}
Bułeczka z masełkiem. Za pomocą istrukcji prototype, rozbudowaliśmy Node czyli pojedyńczy element na naszej stronie. Od tej chwili możemy wstawiać nowe obiekty za elementem:
var p = document.getElementById('akapit');
p.insertAfter(document.createTextNode('...');
Korzystając z powyższych metod z łatwością możemy tworzyć różne skomplikowane kawałki drzewa. Możemy do tego celu wykorzystać także metodę createDocumentFragment(), która tworzy fragment dokumentu. Fragment taki jest "zbiornikiem", podobnym do zwykłego diva, jednak przy wstawianiu go do odokumentu, wstawiane zostają tylko jego dzieci.
Przypuśćmy, że stworzymy fragment, do którego wrzucimy 10 paragrafów. Podczas dołączania tego fragmentu do drzewa dokumentu, wstawione zostaną tak naprawdętylko te paragrafy.
var fragment = document.createDocumentFragment();
for( var i = 0; i < 10; i++ ) {
var p = document.createElement('p');
p.appendChild(document.createTextNode('Akapit '+(i+1)));
fragment.appendChild(p);
}
document.body.appendChild(frag); //wstawiamy 10 paragrafów
Korzystanie z takich pseudo kontenerów prz ymanipulacji większą liczbą nodów jest dobrą techniką i pozytywnie wpływa na szybkość naszego skryptu (w powyższym przyukładzie drzewo dokumentu jest odświeżane 1 raz zamiast 10)
Element, który istnieje w drzewie dom, możemy z niego usunąć korzystając z metody parent.removeChild(obiekt_usuwany). Metoda ta usuwa element "obiekt_usuwany" oraz wszystkie jego dzieci:
Przypuśćmy że z paragrafu z poprzedniego rozdziału chcemy usunąć pogrubiony tekst (czyli usunąć znacznik strong):
<p id="paragraf">To jest <strong>bardzo</strong> ważny tekst</p>
Kod, który usunie znacznik strong może mieć postać:
var p = document.getElementById('paragraf'); //pobieramy nasz paragraf
var strong = p.getElementsByTagName('strong')[0]; //pobieramy 1 strong z paragrafu
p.removeChild(strong); //usuwamy strong z paragrafu
Aby usunąć wszystkie dzieci danego elementu - czyli go wyczyścić, powinniśmy wykonać pętlę po jego dzieciach i wszystkie pousówać. Musimy dodatkowo sprawdzić, czy dany element w ogóle ma dzieci:
Node.prototype.empty = function() {
if (this.childNodes.length) {
for (x=this.childNodes.length-1; x>=0; x--) {
this.removeChild(this.childNodes[x]);
}
}
}
var ul = document.getElementById('lista');
ul.empty(); //czyścimy cały akapit
Pętlę wykonujemy od końca. Gdybyśmy robili ją od początku, wówczas usuwanie elementów zmieniało by indeksację kolejnych dzieci, które nie były by pobierane w kolejnych iteracjach pętli.
Jeżeli chcemy zrobić "przemarsz" od przodu, wcześniej pobierzmy elementy do usunięcia w tablicę, po której zrobimy pętlę.
var elementy = document.childNodes; //pobranie dzieci dokumentu
for (x=0; x<elementy.length; x++) {
elementy[x].parentNode.removeChild(elementy[x]); //usuwamy dany element
}
Powyższy kod usunie nie tylko elementy widoczne na stronie (czyli elementy z sekcji body), ale także sekcję head, dołączone style itp. Taka mała apokalipsa dla naszej strony ^^