Utilisation et différences de innerHTML, innerText et externalHTML dans les compétences JavaScript_javascript

Fini les bêtises, veuillez consulter les exemples ci-dessous.

Utilisation :

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

Peut être utilisé en JS :

test.innerHTML :

C'est-à-dire l'intégralité du contenu depuis la position de départ jusqu'à la position de fin de l'objet, y compris la balise Html.

La valeur de test.innerHTML dans l'exemple ci-dessus est «<span style="color:red">test1</span>

test.innerText :

Contenu de la position de départ à la position de fin, mais il supprime la balise Html

La valeur de text.innerTest dans l'exemple ci-dessus est "test1 test2", avec la balise span supprimée.

test.outerHTML :

En plus de contenir l'intégralité du contenu de innerHTML, il contient également la balise object elle-même.

La valeur de text.outerHTML dans l'exemple ci-dessus est également

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

Exemple complet :

<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>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

Instructions particulières :

InnerHTML est un attribut conforme aux normes du W3C, tandis que innerText n'est applicable qu'aux navigateurs IE. Par conséquent, utilisez autant que possible innerHTML et moins innerText. Si vous souhaitez afficher du contenu qui ne contient pas de balises HTML, vous pouvez utiliser. innerHTML pour obtenir du HTML qui contient Après avoir supprimé le contenu de la balise, utilisez des expressions régulières pour supprimer la balise HTML Voici un exemple simple et conforme aux normes du W3C :

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

Comment distinguer innerHTML et innerText ?

Exemple de code :

<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>

Points communs : innerHTML et innerText remplaceront le contenu au sein de l'élément.

Différences :

1, innerHTML :

C'est-à-dire l'intégralité du contenu depuis la position de départ jusqu'à la position de fin de l'objet, y compris la balise Html.

La valeur de test.innerHTML dans l'exemple ci-dessus est "<span style="color:red">test1</span>
test2 ».

2, texte intérieur :

Contenu de la position de départ à la position de fin, mais il supprime la balise Html

La valeur de text.innerTest dans l'exemple ci-dessus est "test1 test2", avec la balise span supprimée.

Il convient de noter que innerHTML est un attribut conforme aux normes du W3C, tandis que innerText n'est applicable qu'aux navigateurs IE. Par conséquent, utilisez innerHTML autant que possible et innerText moins. peut Après avoir utilisé innerHTML pour obtenir le contenu contenant des balises HTML, utilisez des expressions régulières pour supprimer les balises HTML.

Ce qui précède est une introduction à l'utilisation et aux différences de innerHTML, innerText et externalHTML en JavaScript. J'espère que vous l'aimerez.