Latest web development tutorials
×

JavaScript Kurs

JavaScript Kurs JavaScript Kurze Einführung JavaScript Verwendung JavaScript Export JavaScript Grammatik JavaScript Statements JavaScript Note JavaScript Variable JavaScript Datentypen JavaScript Objekte JavaScript Funktion JavaScript Anwendungsbereich JavaScript Ereignis JavaScript Schnur JavaScript Die Betreiber JavaScript vergleichen JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Typumwandlung JavaScript Reguläre Ausdrücke JavaScript Fehler JavaScript Fehlerbeseitigung JavaScript Variable Lift JavaScript Strict-Modus JavaScript Missbrauch JavaScript Formularauthentifizierung JavaScript reservierte Schlüsselwörter JavaScript JSON JavaScript void JavaScript Code-Spezifikation

JS Funktion

JavaScript Funktionsdefinition JavaScript Funktionsargumente JavaScript Funktionsaufruf JavaScript Verschlüsse

JS HTML DOM

DOM Kurze Einführung DOM HTML DOM CSS DOM Ereignis DOM EventListener DOM Element

JS Erweiterte Tutorial

JavaScript Objekte JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Objekte

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop JavaScript Timed Ereignis JavaScript Cookies

JS Lagerhaus

JavaScript Lagerhaus JavaScript Test jQuery JavaScript Test Prototype

JS Beispiele

JavaScript Beispiele JavaScript Object-Instanz JavaScript Browser-Objektinstanz JavaScript HTML DOM Beispiele JavaScript Zusammenfassung

JS Referenzhandbuch

JavaScript Objekte HTML DOM Objekte

JavaScript HTML-DOM ändert HTML-Inhalt

HTML-DOM ermöglicht JavaScript, um die Inhalte des HTML-Elements zu ändern.


Ändern Sie den HTML-Ausgabestrom

JavaScript kann dynamische HTML-Inhalte zu erstellen:

Dasheutige Datum ist:

In JavaScript document.write () können direkt verwendet werden, um HTML-Inhalt in den Ausgabestream schreiben.

Beispiele

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Versuchen »

Lampe Nie document.write verwenden, nachdem das Dokument Laden beendet ist (). Dies überschreibt das Dokument.


Ändern Sie den HTML-Inhalt

innerHTML- Eigenschaft Mit Der einfachste Weg, den HTML-Inhalt zu ändern.

Um den Inhalt des HTML-Elements zu ändern, verwenden Sie folgende Syntax:

document.getElementById(id).innerHTML=新的 HTML

Dieses Beispiel ändert den Inhalt des <p> Element:

Beispiele

<Html>
<Body>

<P id = "p1"> Hallo Welt! </ P>

<Script>
document.getElementById ( "P1") innerHTML- = "neuen Text !.";
</ Script>

</ Body>
</ Html>

Versuchen »

Dieses Beispiel ändert den Inhalt des <h1> Element:

Beispiele

<!DOCTYPE html>
<html>
<body>

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

<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

</body>
</html>

Versuchen »

Beispiele zu erklären:

  • Die obige HTML-Dokument, das id = "header" des <h1> Element enthält

  • Wir verwenden das HTML-DOM, um die ID zu bekommen = "header" Element

  • JavaScript für dieses Element geändert Inhalt (innerHTML-)


Ändern Sie die HTML-Attribute

Um die Eigenschaften eines HTML-Elements zu ändern, verwenden Sie folgende Syntax:

document.getElementById(id).attribute=新属性值

In diesem Beispiel wird das Attribut src <img> Element:

Beispiele

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Versuchen »

Beispiele zu erklären:

  • Die obige HTML-Dokument, das id = "image" des <img> Element enthält
  • Wir verwenden das HTML-DOM die ID zu bekommen = "image" Element
  • ändern Sie JavaScript um die Eigenschaften dieses Elements (die "smiley.gif" auf "landscape.jpg")