Wie ändere ich den Inhalt von HTML-Elementen in js? HTML-DOM-Implementierung zum Ändern von Inhalten

青灯夜游

Freigeben： 2018-10-09 14:22:23

Original

18838 Leute haben es durchsucht

Wie ändere ich den Inhalt von HTML-Elementen mit js? In diesem Kapitel erfahren Sie, wie Sie mit HTML DOM den Inhalt von HTML-Elementen in js ändern. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Zuerst müssen wir verstehen Was ist HTML-DOM? Welche Rolle spielt HTML DOM?

HTML DOM, kurz für Document Object Model Wenn eine Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite. Das

HTML-DOM-Modell kann als Baum von -Objekten erstellt werden. Wie unten gezeigt:

Wie ändere ich den Inhalt von HTML-Elementen in js? HTML-DOM-Implementierung zum Ändern von Inhalten

Über das HTML-DOM kann auf alle Elemente im JavaScript-HTML-Dokument zugegriffen werden und es können ausreichende Funktionen zum Erstellen von dynamischem HTML erhalten werden. Über HTML DOM kann JavaScript die folgenden Funktionen erreichen:

js kann alle HTML-Elemente auf der Seite ändern; js kann alle HTML-Attribute auf der Seite ändern; js kann alle CSS-Stile auf der Seite ändern; js kann auf alle Ereignisse auf der Seite reagieren.

Lassen Sie uns im Detail vorstellen, wie
js den Inhalt von HTML-Elementen über HTML DOM ändert

1. JS-Änderung und Hinzufügen von HTML-Inhalten

js kann dynamische HTML-Inhalte erstellen und hinzufügen. Verwenden Sie die Methode write(), um HTML-Ausdrücke oder JavaScript-Code direkt in HTML-Dokumente zu schreiben.

Mehrere Parameter (exp1, exp2, exp3,...) können in der write()-Methode aufgelistet werden und werden der Reihe nach an das Dokument angehängt.

Syntax:

document.write(exp1,exp2,exp3,....)

Nach dem Login kopieren

Beschreibung:

Obwohl gemäß dem DOM-Standard die Methode write() nur eine einzelne Zeichenfolge als Parameter akzeptiert. write() kann jedoch beliebig viele Parameter akzeptieren.

Wir verwenden die Methode write() normalerweise auf die folgenden zwei Arten:

1. Wenn Sie diese Methode verwenden, um HTML im Dokument auszugeben.

2 Erstellen Sie ein neues Dokument in einem anderen Fenster oder Rahmen als dem Fenster. Hinweis: Stellen Sie bei dieser Methode sicher, dass Sie zum Schließen des Dokuments die Methode close() verwenden.

Beispiel:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			document.write("<p>Hello World!</p> ","现在是：",Date());
		</script>
	</head>
</html>

Nach dem Login kopieren

Rendering:

Wie ändere ich den Inhalt von HTML-Elementen in js? HTML-DOM-Implementierung zum Ändern von Inhalten 2. js ändern und ersetzen den Inhalt des HTML-Elements

Der einfachste und direkteste Weg für js, den Inhalt von HTML-Elementen zu ändern und zu ersetzen, ist die Verwendung des innerHTML-Attributs.

Syntax:

document.getElementById(id).innerHTML=new HTML

Nach dem Login kopieren

document.getElementById(id) dient dazu, das HTML-Element zu finden und abzurufen, das geändert und durch die ID ersetzt werden muss, und dann das innerHTML-Attribut zu verwenden, um den Inhalt zu ändern das ersetzte HTML-Element.

Beispiel (der Inhalt des

-Elements wurde geändert):

<!DOCTYPE html>
<html>
<body>

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

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

<p>"Old Header" 已被修改为 "New Header"。</p>

</body>
</html>

Nach dem Login kopieren

Rendering:

Beschreibung: Wie ändere ich den Inhalt von HTML-Elementen in js? HTML-DOM-Implementierung zum Ändern von Inhalten

Das HTML-Dokument im Beispiel enthält das

-Element mit der ID="header"; 🎜>

Mit dem innerHTML-Attribut können Sie den gesamten Inhalt im HTML-Element

reparieren und ersetzen.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

JavaScript-Video-Tutorial

Verwandte Empfehlungen:

Öffentliches PHP-Schulungsvideo-Tutorial

JavaScript-Grafik-Tutorial

JavaScript Online-Handbuch

Das obige ist der detaillierte Inhalt vonWie ändere ich den Inhalt von HTML-Elementen in js? HTML-DOM-Implementierung zum Ändern von Inhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!