innerHTML, innerText, TextContent 的区别

更新日期: 2018-12-15 阅读次数: 2977 分类: Javascript

测试用的 HTML 代码

<div class="quoteText">
      “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”
  <br>  ―
  <span class="authorOrTitle">
    Albert Einstein
  </span>
</div>

innerHTML

document.querySelector(".quoteText").innerHTML
"
      “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”
  <br>  ―
  <span class="authorOrTitle">
    Albert Einstein
  </span>
"

想基于内部 tag 来处理文本时,可以使用 innerHTML.

textContent

document.querySelector(".quoteText").textContent
"
      “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”
    ―
  
    Albert Einstein
  
"

innerText

document.querySelector(".quoteText").innerText
"“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.” 
― Albert Einstein"

outerText

document.querySelector(".quoteText").outerText
"“Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.” 
― Albert Einstein"

outerHTML

document.querySelector(".quoteText").outerHTML
"<div class="quoteText">
      “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.”
  <br>  ―
  <span class="authorOrTitle">
    Albert Einstein
  </span>
</div>"

innerText 与 textContent 的区别

从这段测试代码上看,并没有本质上的区别。但是:

  • innerText 会去除 display none 的部分
  • 而 textContent 会全部返回

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年02月24日 第三世界青年日
2020年02月24日 龙抬头
2020年02月28日 世界居住条件调查日
2020年03月01日 国际海豹日
2020年03月03日 全国爱耳日
2020年03月05日 学雷锋日
2020年03月05日 惊蛰
2020年03月08日 三八妇女节
2020年03月12日 植树节
2020年03月14日 白色情人节
2020年03月15日 消费者权益日
2020年03月17日 国际航海日
查看更多节日