Heim > Artikel > Web-Frontend > Wie ändere ich den Inhalt von HTML-Elementen in js? HTML-DOM-Implementierung zum Ändern von Inhalten

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

青灯夜游Original: 2018-10-09 09:54:3018788Durchsuche

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,....)

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>

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erfahren Sie, wie Sie noConflict() in jQuery verwendenNächster Artikel：Erfahren Sie, wie Sie noConflict() in jQuery verwenden

In Verbindung stehende Artikel

Mehr sehen