Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden

青灯夜游
Freigeben: 2021-07-29 17:34:37
Original
7619 Leute haben es durchsucht

innerhtml und innertext sind zwei Eigenschaften im JavaScript-Elementobjekt. Beide können den Textinhalt des Dokumentobjekts festlegen oder abrufen, es gibt jedoch einige Unterschiede zwischen den beiden. Der folgende Artikel führt Sie dazu, die Attribute innerhtml und innertext zu verstehen, innerhtml und innertext kurz zu vergleichen und herauszufinden, was der Unterschied zwischen den beiden ist.

Werfen wir zunächst einen kurzen Blick auf die Attribute innerHTML und innerText und verwenden Sie dann Codebeispiele, um den Unterschied zwischen den Attributen innerHTML und innerText intuitiv zu spüren. [Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

  • innerHTML-Attribut: Sie können den gesamten Inhalt von der Startposition bis zur Endposition des Etiketts festlegen oder abrufen.

  • innerText-Attribut: Sie können die Startposition festlegen oder abrufen Position bis zur Endposition des Etiketts Alle Textinformationen

Es ist etwas verwirrend, es durch Text zu beschreiben

Was sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden

Kennen wir anhand des obigen Bildes den Unterschied zwischen innerhtml und Innertext-Attribute? Lassen Sie uns Codebeispiele zur Veranschaulichung verwenden. Schauen Sie sich den Unterschied zwischen Innerhtml- und Innertext-Attributen an:

Zuerst haben wir ein solches HTML-Framework

<div id="test">
	<span style="color:red">test1</span> test2
</div>
<input type="button" onclick="getContent()" value="获取div元素的内容"/>
Nach dem Login kopieren

Was sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden

Wir verwenden das innerHTML-Attribut, um den Inhalt im div-Tag abzurufen

<script type="text/javascript">
	function getContent(){
		var div=document.getElementById("test");
		console.log(div.innerHTML);
	}
</script>
Nach dem Login kopieren

Klicken Sie auf die Schaltfläche, die Ausgabe der Konsole:

Was sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden

Wir verwenden das innerText-Attribut, um den Inhalt im div-Tag abzurufen

<script type="text/javascript">
	function getContent(){
		var div=document.getElementById("test");
		console.log(div.innerText);
	}
</script>
Nach dem Login kopieren

Klicken Sie auf die Schaltfläche, die Ausgabe der Konsole:

Was sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden

Zusammenfassung : Der Unterschied zwischen innerHTML- und innerText-Attributen

Das innerText-Attribut kann den Abstand zwischen Tags ausgeben. Die Klartextinformationen filtern die Tags heraus.

Das innerHTML-Attribut kann den gesamten Inhalt zwischen Tags ausgeben, einschließlich der darin enthaltenen HTML-Tags und Textinformationen.

Besonderer Hinweis:

innerHTML ist ein Attribut, das den W3C-Standards entspricht, während innerText nur auf IE-Browser anwendbar ist, daher sollte innerText sparsam verwendet werden.

Wenn Sie Inhalte ohne HTML-Tags ausgeben müssen, können Sie zunächst innerHTML verwenden, um den Inhalt mit HTML-Tags abzurufen, und dann reguläre Ausdrücke verwenden, um HTML-Tags zu filtern.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWas sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage