实时应用中如何避免浏览器自动补全HTML标签？

问题场景 #

初始HTML结构：

<div id="content"></div>

通过分批执行JS代码添加内容：

content = document.getElementById(`content`);
content.innerHTML += "<p>The paragraph starts"
// 后续执行
content.innerHTML += " and ends.</p>"

浏览器会自动补全不完整的HTML标签，最终生成的结构为：

<p>The paragraph starts</p> and ends.<p></p>

但预期结果是：

<p>The paragraph starts and ends.</p>

由于开发的是实时应用，服务器会分批发送文档内容，无法提前构建完整合法的HTML，需要解决这个标签自动补全的问题。

最小可复现示例 #

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Test</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script type="text/javascript">
    window.onload = (event) => {
        content = document.getElementById("content")
        content.innerHTML = "<p>The paragraph starts"
        setTimeout(function(){
            content.innerHTML += " and ends.</p>"
        }, 3000);
    };
    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

可行解决方案 #

方案一：直接操作DOM节点（推荐） #

放弃拼接HTML字符串的方式，直接创建DOM元素并分批添加文本节点，完全由自己控制元素结构：

window.onload = (event) => {
    const content = document.getElementById("content");
    // 先创建p元素并加入容器
    const p = document.createElement('p');
    content.appendChild(p);
    // 第一次添加文本
    p.appendChild(document.createTextNode("The paragraph starts"));
    setTimeout(function(){
        // 第二次追加文本
        p.appendChild(document.createTextNode(" and ends."));
    }, 3000);
};

方案二：暂存未闭合的HTML片段 #

维护一个缓冲区暂存不完整的HTML内容，等收到能闭合标签的内容后，再一次性插入DOM：

window.onload = (event) => {
    const content = document.getElementById("content");
    let buffer = "";
    // 第一次收到的内容存入缓冲区
    buffer += "<p>The paragraph starts";
    setTimeout(function(){
        // 第二次收到的内容补全缓冲区
        buffer += " and ends.</p>";
        // 插入完整的HTML
        content.innerHTML = buffer;
    }, 3000);
};

如果是多段分批内容，可以每次检查缓冲区是否存在未闭合标签，待标签闭合后再执行插入操作。

方案三：定位已有DOM元素追加内容 #

如果已经插入了未闭合的标签，直接找到对应的DOM元素，向其内部追加内容，避免重新解析整个容器的HTML：

window.onload = (event) => {
    const content = document.getElementById("content");
    content.innerHTML = "<p>The paragraph starts";
    setTimeout(function(){
        // 找到容器内的p元素
        const p = content.querySelector('p');
        // 向p元素内部追加内容
        p.insertAdjacentHTML('beforeend', " and ends.");
    }, 3000);
};

内容的提问来源于stack exchange，提问作者ScientiaEtVeritas