innerHTML、outerHTML、textContent、innerText、outerText实例属性的区别

1.innerHTML和outerHTML区别

实例属性区别
ElementinnerHTML目标元素标签之间的 HTML 代码,不包括目标元素标签本身。
ElementouterHTML目标元素标签之间的 HTML 代码,包括目标元素标签本身。
//HTML
<div id="d">
  <p>Content</p>
  <p>Further Elaborated</p>
</div>

//JS
const d = document.getElementById("d");
//innerHTML
console.log(d.innerHTML);
//输出
<p>Content</p><p>Further Elaborated</p>
//outerHTML
console.log(d.outerHTML);
//输出
<div id="d"><p>Content</p><p>Further Elaborated</p></div>

2.textContent和innerText区别

实例属性区别
NodetextContent渲染前目标元素标签之间的元素内容,不包括目标元素标签本身。
HTMLElementinnerText渲染后目标元素标签之间的元素内容,不包括目标元素标签本身。
//HTML
<p id="source">
  <style>
    #source {
      color: red;
    }
    #text {
      text-transform: uppercase;
    }
  </style>
  <span id="text">
    Take a look at<br />
    how this text<br />
    is interpreted below.
  </span>
  <span style="display:none">HIDDEN TEXT</span>
</p>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>

//JS
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");
//textContent
textContentOutput.value = source.textContent;
//输出
#source {
  color: red;
}
#text {
  text-transform: uppercase;
}
  
  
Take a look at
how this text
is interpreted below.
  
HIDDEN TEXT
//innerText
innerTextOutput.value = source.innerText;
//输出
TAKE A LOOK AT
HOW THIS TEXT
IS INTERPRETED BELOW.

3.innerText和outerText区别

实例属性区别
HTMLElementinnerText渲染后目标元素标签之间的元素内容,不包括目标元素标签本身。
HTMLElementouterText渲染后目标元素标签之间的元素内容,包括目标元素标签本身。
//HTML
<div>
  <p>Change Me</p>
</div>
//innerText
p.innerText = "Changed!"
//输出
<div>
  <p>Changed!</p>
</div>
//outerText
p.outerText = "Changed!"
//输出
<div>
   Changed!
</div>

原创文章,作者:huoxiaoqiang,如若转载,请注明出处:https://www.huoxiaoqiang.com/experience/javascriptexp/31854.html

(0)
huoxiaoqiang的头像huoxiaoqiang
上一篇 2023年10月11日
下一篇 2023年10月29日

相关推荐

  • 使用JavaScript的三种方式

    1.内联(Inline)方式 内联(Inline)方式,又称为行内方式。往往用于单个元素。 2.内部(Internal)方式 往往用于单个网页。 3.外部(External)方式 往往用于所有网页。 4.优先级 比如上面的示例中 myFunction() 事件处理程序函数,当同时存在多种使用 JavaScript 的方…

    JavaScript经验 2023年10月11日
    0710
  • 使用CSS的三种方式

    1.内联(Inline)方式 内联(Inline)方式,又称为行内方式。往往用于单个元素。 2.内部(Internal)方式 往往用于单个网页。 3.外部(External)方式 往往用于所有网页。 4.优先级 当同时存在多种使用 CSS 的方式时,如果为相同的选择器(元素)定义了相同的 CSS 属性名,则优先级如下:…

    JavaScript经验 2023年10月10日
    0600
  • npm exec和npx的区别

    从以上两者的使用方式上,我们很容易可以看出,npm exec 命令后面的内容与 npx 命令后面的内容相同,npx 就是 npm exec 的简写,但在解决包方面还是有一些区别的,如下所示: npm exec 可以使用双连字符(–)标志(flag)来抑制作为选项的包的解决,以达到与 npx 一样的功能。 npx

    JavaScript经验 2021年7月24日
    01.4K0

发表回复

登录后才能评论