JavaScript向<div>插入含HTML标签的内容时的粗体显示问题及解决方案

嗨，这个问题我太熟悉了！咱们先拆解清楚为啥第二个<div>里的fox没变成预期的粗体，再看看怎么修复～

问题根源 #

问题出在拆分字符串的方式和多次修改innerHTML的行为上：

1. 第二个句子里的<b>和fox、fox和</b>之间都有空格，用split(' ')拆分后，会生成包含空字符串的数组（比如["the", "quick", "<b>", "", "fox", "", "</b>", "jumps"]）。
2. 你循环里每次用container.innerHTML += words[i] + ' '，本质是让浏览器把当前DOM先序列化为HTML字符串，拼接新内容后再重新解析成DOM。
3. 举个关键的步骤：当你拼完<b> 之后，浏览器会把它解析成<b> </b>（带空格的闭合标签）；后续拼接fox时，内容会被放到<b>标签外面的文本节点里；最后拼</b>时，这个闭合标签没有对应的开标签，就会被当成普通文本显示，自然fox就不是粗体了。

而第一个句子里<b>fox</b>是连在一起的，split(' ')后作为一个整体被拼接，一次性解析成正确的粗体标签，所以显示正常。

修复方案 #

有两种简单高效的修复方式，按需选择：

方案1：直接拼接数组为完整字符串，一次性设置innerHTML

这种方式最简洁，直接还原原句子的结构，让浏览器一次性解析所有HTML标签：

function process(sentence, element) {
    const words = sentence.split(' ');
    const container = document.getElementById(element);
    // 用join还原完整句子，一次性设置innerHTML
    container.innerHTML = words.join(' ') + ' ';
}

方案2：先构建完整内容字符串，再一次性赋值

如果循环里有其他额外逻辑（比如需要处理每个单词），可以先把内容拼到变量里，最后再设置innerHTML，避免多次DOM解析：

function process(sentence, element) {
    const words = sentence.split(' ');
    const container = document.getElementById(element);
    let content = '';
    for (let i = 0; i < words.length; i++) {
        content += words[i] + ' ';
        // 这里可以加其他单词处理逻辑
    }
    container.innerHTML = content;
}

修改后再运行代码，第二个<div>里的fox就会正常显示为粗体啦～

备注：内容来源于stack exchange，提问作者Cris