innerHTML, innerText, TextContent 的区别

更新日期: 2018-12-15 阅读次数: 2463 分类: 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 会全部返回

爱评论不评论

近期节日

2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日