为什么在使用 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。