Ultimele tutoriale de dezvoltare web
 

JavaScript HTML DOM - Schimbarea HTML


HTML DOM permite JavaScript pentru a schimba conținutul de elemente HTML.


Schimbarea fluxului de ieșire HTML

JavaScript poate crea conținut HTML dinamic:

Date: Sun Nov 06 2016 19:23:35 GMT+0800 (中国标准时间) Date: Sun Nov 06 2016 19:23:35 GMT+0800 (中国标准时间)

În JavaScript, document. write() document. write() poate fi folosit pentru a scrie direct în fluxul de ieșire HTML:

Exemplu

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>
Încearcă - l singur »

Nu folosiți niciodată document. write() document. write() după ce documentul este încărcat. Acesta va suprascrie documentul.


Schimbarea de conținut HTML

Cel mai simplu mod de a modifica conținutul unui element HTML este folosind innerHTML proprietate.

Pentru a modifica conținutul unui element HTML, utilizați această sintaxă:

document. getElementById( id ) .innerHTML = new HTML

Acest exemplu modifică conținutul unui <p> Element:

Exemplu

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>
Încearcă - l singur »

Acest exemplu modifică conținutul unui <h1> Element:

Exemplu

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>

</body>
</html>
Încearcă - l singur »

Exemplu explicat:

  • Documentul HTML conține deasupra unui <h1> elementul cu id="header"
  • Noi folosim DOM HTML pentru a obține elementul cu id="header"
  • O JavaScript schimbă conținutul (innerHTML) al acelui element

Modificarea valorii unui atribut

Pentru a modifica valoarea unui atribut HTML, utilizați această sintaxă:

document. getElementById( id ) . attribute=new value

Acest exemplu modifică valoarea src atribut al unui <img> Element:

Exemplu

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
Încearcă - l singur »

Exemplu explicat:

  • Documentul HTML conține mai sus un <img> elementul cu id="myImage"
  • Noi folosim DOM HTML pentru a obține elementul cu id="myImage"
  • O JavaScript schimbă src atribut al acelui element din "smiley.gif" la "landscape.jpg"

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »