Modyfikacja HTML DOM
Modyfikowanie HTML = elementów zmian, atrybuty stylów i wydarzeń.
Edycja elementów HTML
Modyfikowanie HTML DOM oznacza wiele różnych aspektów:
- Zmień zawartość HTML
- Zmiana Style CSS
- Zmień atrybuty HTML
- Utwórz nowy element HTML
- Usuń istniejące elementy HTML
- Zmiana zdarzenia (handler)
W następnych rozdziałach będziemy badać dogłębnie DOM HTML, aby zmodyfikować sposób konwencjonalny.
Tworzenie treści HTML
Najprostszym sposobem, aby zmienić zawartość elementu jest wykorzystanie właściwości innerHTML.
Poniższy przykład zmienia zawartość HTML <p> element:
Przykłady
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
Spróbuj »
 | Wyjaśnimy wam szczegóły przykład w następujących sekcjach. |
|---|
Zmień styl HTML
Poprzez DOM HTML, można uzyskać dostęp do elementów HTML stylu obiektu.
Poniższy przykład zmienić styl HTML akapitu:
Przykłady
<html>
<body>
<body>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Spróbuj »
Utwórz nowy element HTML
Aby dodać nowy element do DOM HTML, należy najpierw utworzyć element (węzeł element), a następnie dołączyć go do istniejących elementów.
Przykłady
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
Spróbuj »