JavaScript HTML DOM - Αλλαγή HTML

Το HTML DOM επιτρέπει στο JavaScript να αλλάξει το περιεχόμενο των HTML στοιχείων.

αλλαγή HTML output stream

Το JavaScript μπορεί να δημιουργήσει δυναμικό HTML περιεχόμενο:

Στο JavaScript,document.write() Χρησιμοποιείται για να γράψει απευθείας στον HTML output stream:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Μην χρησιμοποιείτε ποτέ το document.write() μετά τη φόρτωση του εγγράφου document.write(). Αυτό θα καλύψει το έγγραφο.

αλλαγή περιεχομένου HTML

Ο απλούς τρόπος για να αλλάξετε το περιεχόμενο του HTML έγγραφου είναι να χρησιμοποιήσετε innerHTML πρότυπο.

Για να αλλάξετε το περιεχόμενο του στοιχείου HTML, χρησιμοποιήστε αυτή τη σύνταξη:

document.getElementById(id).innerHTML = νέο κείμενο

Αυτό το παράδειγμα τροποποιεί <p> Το περιεχόμενο του στοιχείου:

Παράδειγμα

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Αναλυτική περιγραφή:

  • Το παραπάνω έγγραφο HTML περιέχει το στοιχείο <p> με το id="p1"
  • Χρησιμοποιούμε το HTML DOM για να αποκτήσουμε το στοιχείο με το id="p1"
  • Το JavaScript αλλάζει το περιεχόμενο του στοιχείου (innerHTML) σε "Hello Kitty!"

Αυτό το παράδειγμα τροποποιεί <h1> Το περιεχόμενο του στοιχείου:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Αναλυτική περιγραφή:

  • Το παραπάνω HTML περιέχει ένα στοιχείο <h1> με το id="header"
  • Εμείς χρησιμοποιούμε το HTML DOM για να αποκτήσουμε το στοιχείο με το id="header"
  • JavaScript αλλάζει το περιεχόμενο αυτού του στοιχείου (innerHTML)

Αλλαγή της τιμής της ιδιότητας

Για να αλλάξετε την τιμή της ιδιότητας του HTML στοιχείου, χρησιμοποιήστε τη γλώσσα:

document.getElementById(id).ιδιότητα = νέα τιμή

Αυτό το παράδειγμα τροποποιεί <img> στοιχείου src Η τιμή της ιδιότητας:

Παράδειγμα

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Δοκιμάστε το προσωπικά

Αναλυτική περιγραφή:

  • Το παραπάνω έγγραφο HTML περιέχει ένα στοιχείο <img> με id="myImage"
  • Χρησιμοποιούμε το HTML DOM για να πάρουμε το στοιχείο με id="myImage"
  • Το JavaScript αλλάζει την ιδιότητα src αυτού του στοιχείου από "smiley.gif" σε "landscape.jpg"