Heim Web-Frontend js-Tutorial Was sind die Unterschiede zwischen innerhtml und innertext? Ein einfacher Vergleich zwischen den beiden

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

Jul 29, 2021 pm 04:31 PM
javascript

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!

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

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript

So verwenden Sie insertBefore in Javascript So verwenden Sie insertBefore in Javascript Nov 24, 2023 am 11:56 AM

So verwenden Sie insertBefore in Javascript

See all articles