使用innerHTML或innerText时，为什么在控制台输出中看不到HTML <h3>标记？

Question

consoleOutputText = document.getElementById('phrase2').innerText
consoleOutputHTML = document.getElementById('phrase2').innerHTML

console.log(consoleOutputText)
console.log(consoleOutputHTML)

<p id='phrase2'>This **[<h3>statement</h3>][1]** <b>populates</b> in browser Console.</p>

Answer 1

• <h3>不能是<p>的后代。
• 因此您的HTML不正确。
• 因此您的浏览器会更改文档as per HTML5's rules for fixing broken, malformed and incorrect documents的结构：
• 因此浏览器取出<h3>并将<p>一分为二。

• 因此您的实际文档结构发生了变化...

  • ...从此开始（每个DOM节点（包括#text节点在其单独的行上）：

    <p id='phrase2'>
    This **[
    <h3>statement</h3>
    ][1]**
    <b>populates</b>
    in browser Console.
    </p>
    

  • 为此（每个DOM节点（包括#text个节点都在其单独的行上）：

    <p id='phrase2'>This **[</p>
    <h3>statement</h3>
    "][1]**
    <b>populates</b> in browser Console.
    <p></p>
    

• 由于默认情况下<h3>元素被设置为块级元素，因此会在呈现的页面内引起换行。

• 此外，请勿使用innerText，而应使用textContent。