Verwendung und Unterschiede von innerHTML, innerText und OuterHTML in JavaScript_Javascript-Kenntnissen

Kein Unsinn mehr, sehen Sie sich bitte die Beispiele unten an.

Verwendung:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>

Kann in JS verwendet werden:

test.innerHTML:

Das heißt, der gesamte Inhalt von der Startposition bis zur Endposition des Objekts, einschließlich des HTML-Tags.

Der Wert von test.innerHTML im obigen Beispiel ist “0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114“.

test.innerText:

Inhalt von der Startposition bis zur Endposition, aber das HTML-Tag

wird entfernt

Der Wert von text.innerTest im obigen Beispiel ist „test1 test2“, wobei das Span-Tag entfernt wurde.

test.outerHTML:

Es enthält nicht nur den gesamten Inhalt von innerHTML, sondern auch das Objekt-Tag selbst.

Der Wert von text.outerHTML im obigen Beispiel ist ebenfalls

<div id="test"><span style="color:red">test1</span> test2</div>

Vollständiges Beispiel:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>
innerHTML内容
inerHTML内容
outerHTML内容

Besondere Hinweise:

InnerHTML ist ein Attribut, das den W3C-Standards entspricht, während innerText nur für IE-Browser gilt. Verwenden Sie daher so oft wie möglich innerHTML und weniger innerText innerHTML, um HTML zu erhalten, das Folgendes enthält: Nachdem Sie den Inhalt des Tags entfernt haben, verwenden Sie reguläre Ausdrücke, um das HTML-Tag zu entfernen. Hier ist ein einfaches Beispiel, das den W3C-Standards entspricht:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+&#63;>/gim,''))">无HTML,符合W3C标准</a>

Wie unterscheidet man innerHTML und innerText?

Beispielcode:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a 
href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a 
href="javascript:alert(test.innerText)">inerHTML内容</a> 

Gemeinsame Punkte: innerHTML und innerText ersetzen den Inhalt innerhalb des Elements.

Unterschiede:

1, innerHTML:

Das heißt, der gesamte Inhalt von der Startposition bis zur Endposition des Objekts, einschließlich des HTML-Tags.

Der Wert von test.innerHTML im obigen Beispiel ist „0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114
test2“.

2, innerText:

Inhalt von der Startposition bis zur Endposition, aber das HTML-Tag

wird entfernt

Der Wert von text.innerTest im obigen Beispiel ist „test1 test2“, wobei das Span-Tag entfernt wurde.

Es ist zu beachten, dass innerHTML ein Attribut ist, das den W3C-Standards entspricht, während innerText nur für IE-Browser gilt. Wenn Sie Inhalte ohne HTML-Tags ausgeben möchten, sollten Sie daher so viel wie möglich innerHTML verwenden Nachdem Sie innerHTML verwendet haben, um den Inhalt mit HTML-Tags abzurufen, können Sie reguläre Ausdrücke verwenden, um die HTML-Tags zu entfernen.

Das Obige ist eine Einführung in die Verwendung und die Unterschiede von innerHTML, innerText und äußererHTML in JavaScript. Ich hoffe, es gefällt Ihnen.