通过JS添加内容时如何在<div>中显示粗体文字？

Question

第二个元素未显示预期结果。为什么以及如何解决？

function process(sentence,element) {
    
    const words = sentence.split(' ');
    const container = document.getElementById(element);
    let index = 0;

    container.innerHTML = '';

    for (let i = 0; i < words.length; i++) {
        //console.log(words[i]);
        container.innerHTML += words[i] + ' '; // Display the word
    }
}

process("the quick <b>fox</b> jumps",'e1');   //displayed the word 'fox' as expected in bold
process("the quick <b> fox </b> jumps",'e2'); //displayed the word 'fox' as plain text, not as expected

div{
  border:1px solid #999;
  margin: 0 0 10px 0;
  display:block;
  font-size:22px
  }

<div id="e1"></div>
<div id="e2"></div>

Answer 1

在第二种情况下，文本“fox”不会以粗体显示，原因如下：

有时您已将

<b>

添加到

innerHTML

属性，但没有添加结束

</b>

。这将是无效的 HTML，因此该标记会立即关闭。仅在循环的下一次迭代中添加单词“fox”，但它现在出现在 <b></b> 标签的

after

后面。在之后的迭代中，

</b>

被添加到

innerHTML

，但没有任何效果，因为没有匹配的

<b>

。

总而言之，如果您指定为

innerHTML

，请注意 HTML 已经过验证，并且将应用更正以使其有效。