Maison  >  Article  >  interface Web  >  La différence entre innerHTML, innerText et externalHTML en JavaScript

La différence entre innerHTML, innerText et externalHTML en JavaScript

yulia
yuliaoriginal
2018-09-14 17:25:361594parcourir

J'ai récemment résumé quelques connaissances JavaScript et les ai partagées avec vous. Cet article parle principalement des différences d'utilisation de innerHTML, innerText et externalHTML en JavaScript. Les amis dans le besoin peuvent y jeter un œil.

Utilisation :

<div id="test">
   <span style="color:red">test1</span> test2
</div>
peut être utilisé en JS :

test.innerHTML :

C'est-à-dire, à partir du object Tout le contenu de la position de départ à la position de fin, y compris les balises HTML.

La valeur de test.innerHTML dans l'exemple ci-dessus est "0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114 test2 ".

test.innerText :

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

text.innerTest dans ce qui précède exemple La valeur 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 d'objet elle-même.

La valeur de text.outerHTML dans l'exemple ci-dessus est 024ec8e648c1f06980a2d32e6dcf0f0b0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114 🎜>

Exemple complet :

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

innerHTML est un attribut conforme aux standards du W3C, alors que innerText ne s'applique qu'aux navigateurs IE, donc, utilisez innerHTML autant que possible et utilisez innerText moins. Si vous souhaitez générer du contenu sans balises HTML, vous pouvez utiliser innerHTML pour obtenir le contenu contenant des balises HTML, puis utiliser des expressions régulières pour supprimer les balises HTML. Exemple standard simple conforme au W3C :

e215d2bd77d2d36e0b956531e42191d9/gim,'') )"> ;Pas de HTML, conforme aux normes W3C5db79b134e9f6b82c0b36e0489ee08ed.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn