為什么innerHTML setter不能正常工作<br>標簽？

Question

為什么新行在通過 innerText 獲取真實 DOM 元素時正確呈現，但在我使用某些 javascript 創建它們時沒有考慮？

這段代碼有什么問題？

 const real = document.querySelector('p'); const fake = document.createElement('p'); fake.innerHTML = 'foo<br>bar'; console.log(real.innerText); // this is not similar console.log(real.textContent); console.log(real.innerHTML); console.log(fake.innerText); // to this, but why? console.log(fake.textContent); console.log(fake.innerHTML);

 <p>foo<br>bar</p>

Answer 1

那是因為您使用的是不完整的 br 標簽。 您應該使用<br />而不是<br >

Answer 2

innerHTML setter 工作正常，問題在於需要布局信息來計算結果的innerText方法。 由於fake節點不在 DOM 中，因此沒有此類信息，因此它只是忽略了<br> 。 將節點插入 DOM 后，結果是相同的：

 const real = document.querySelector('p'); const fake = document.createElement('p'); fake.innerHTML = 'foo<br>bar'; document.body.appendChild(fake); console.log(real.innerText); // this is not similar console.log(fake.innerText); // to this, but why?

 <p>foo<br>bar</p>