类 实例属性 区别 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>类 实例属性 区别 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.类 实例属性 区别 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
