Logo Media Nauka

Facebook

Modyfikowanie węzłów

Wiemy już jak odnaleźć węzeł z poziomu JavaScript, utworzyć go, zniszczyć i podmienić. W tym artykule pokażę kilka metod modyfikacji węzłów.

innerHTML

To bardzo wygodna właściwość, która umożliwia odczyt, zmodyfikowanie, wstawienie, albo usunięcie kodu HTML z danego elementu DOM.

Przykład 1 - zastosowanie innerHTML

Poniżej został wstawiony akapit o id="Akapit-1". Za pomocą innerHTML zmodyfikujemy go.

To jest testowy akapit z pogrubionym tekstem.

<p id="Akapit-1">To jest testowy akapit z <strong>pogrubionym tekstem</strong>.</p>
<body> <script> document.getElementById("Akapit-1").innerHTML = "A to jest zmodyfikowany tekst <strong> z pogrubionym tekstem<>"; </script>
Lupa


Jak widać właściwość innerHTML jest prosta w użyciu i możemy za jej pomocą umieszczać w danym węźle cały kod HTML. Ma to swoje zalety (prostota) i wady (tracimy referencje z poziomu JavaScript do zawartości takiego węzła).

Właściwość ta umożliwia, jak widać w powyższym przykładzie, wstawianie wartości, ale jest to też właściwość umożliwiająca odczyt kodu HTML z danego węzła.

Bardzo podobną właściwością jest textContent, która odnosi się tylko do tekstu.

Przykład 2 - Usuwanie zawartości węzła

Zobaczmy przykład, który z elementu <div> usuwa zawartość kodu HTML.

<script>
	document.getElementById("Kontener").innerHTML = "";
</script>
Lupa

To jest zawartość div-a

Przykład 3 - Zmiana zawartości węzła oraz stylu

Zobaczmy przykład, który do elementu <div> wstawi większą część kodu HTML, zastępując starą zawartość.

<div id="Div-1" style="border: solid; border-color:burlywood; background-color: antiquewhite; padding: 10px; margin: 10px; width:40%; text-align: center;">To jest zawartość <strong>pierwszego</strong> div-a.</div>

<script>
var w = document.getElementById("Div-1");
w.innerHTML = "<p>To jest nowa zawartość div-a.</p><p> <b>Można tu wstawić na przykład</b>:</p><ul><li>listę nieuporządkowaną</li><li>linki</li><li>grafikę</li><li>... i cokolwiek innego</li></ul>>";
w.style.textAlign = 'left';
w.style.background = 'beige';
</script>
Lupa

To jest zawartość pierwszego div-a.

Przykład 4 - Przypisanie nowego stylu lub klasy do węzła.

Pamiętaj, że możesz zadziałać na całym stylu używając metody setAttribute("style", styl_CSS) lub dodać klasę setAttribute("class", nowa_klasa);

<div id="Div-1" style="border: solid; border-color:burlywood; background-color: antiquewhite; padding: 10px; margin: 10px; width:40%; text-align: center;">To jest zawartość div-a.</div>
<script>
w.setAttribute("class","boxik");
w.setAttribute("style","border: solid; border-color:burlywood; background-color: white; padding: 5px; margin: 5px; width:35%; text-align: center;"); </script>
Lupa

To jest zawartość div-a.



© medianauka.pl, 2016-11-12, ART-3290


Inne zagadnienia z tej lekcji

Document Object Model - DOMDocument 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 DOMPobieranie 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 DOMRelacje 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.
Tworzenie i usuwanie elementówTworzenie i usuwanie elementów
Opis metod tworzenia i usuwania węzłów w dokumencie HTML przy użyciu JavaScript. W tym artykule pokazuję, jak stworzyć, usunąć albo podmienić element strony internetowej.







Polecamy w naszym sklepie

laboratorium w szufladzie Modelarstwo i robotyka
Kolorowe skarpetki urodzinowe
Kolorowe skarpetki Kostka
kolorowe skarpetki góra lodowa
Kolorowe skarpetki Miasto
Niektóre treści nie są dostosowane do Twojego profilu. Jeżeli jesteś pełnoletni możesz wyrazić zgodę na przetwarzanie swoich danych osobowych. W ten sposób będziesz miał także wpływ na rozwój naszego serwisu.
© ® Media Nauka 2008-2020 r.