您的位置是:网站首页>Javascript编程Javascript编程

JavaScript中innerHTML、innerText和outerHTML的区别

少儿编程网2020-02-13 19:39:20Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介最近归纳总结了一些JavaScript知识,分享给大家。这篇文章主要讲了JavaScript中innerHTML、innerText和outerHTML的用法区别,具有一定的参考价值,有需要的朋友可以看看,希望可以帮助到你。用法:<divid=test><s

**近归纳总结了一些JavaScript知识,分享给大家。这篇文章主要讲了JavaScript 中innerHTML、innerText和outerHTML的用法区别,具有一定的参考价值,有需要的朋友可以看看,希望可以帮助到你。

 7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

用法:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

在JS中可以使用:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

test.innerHTML:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

test.innerText:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  从起始位置到终止位置的内容, 但它去除Html标签7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

test.outerHTML:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  除了包含innerHTML的全部内容外, 还包含对象标签本身。7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

完整示例:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

特别说明:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>。7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

以上就是JavaScript中innerHTML、innerText和outerHTML的区别的详细内容,更多请关注少儿编程网其它相关文章!7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网7cy少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

JavaScript中innerHTML、innerText和outerHTML的区别

      匿名评论
    • 评论
    人参与,条评论
    JavaScript中innerHTML、innerText和outerHTML的区别

微信公众号

免费视频教程

先知道