渲染前清除元素报错，Lit-html render方法是替换还是追加内容？

报错原因 #

你手动执行appDiv.innerHTML = ''清空容器时，会删除Lit-html第一次渲染后留在容器内的内部跟踪标记（用于DOM更新的注释节点）。第二次调用render时，Lit-html无法找到这些标记节点，从而抛出Cannot read properties of null (reading 'insertBefore')错误。

Lit-html render方法的行为 #

• 首次调用：完全替换目标容器的所有子内容，效果和jQuery的$(selector).html(content)一致。
• 后续调用：基于之前的渲染结果进行增量更新，只会修改DOM中变化的部分，不会追加内容，也不会完全重新渲染所有节点。

正确的实现方式 #

不要手动通过innerHTML清空容器，直接调用render即可完成内容替换/更新：

const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>TypeScript Starter</h1>`;

// 直接替换内容，无需手动清空
render(html`<h1>lol</h1>`, appDiv);

// 再次调用render更新内容（此处内容无变化，不会触发DOM修改）
render(html`<h1>lol</h1>`, appDiv);

如果需要主动清空容器内容，可以渲染空模板：

// 清空容器
render(html``, appDiv);
// 渲染新内容
render(html`<h1>lol</h1>`, appDiv);

关键注意事项 #

Lit-html依赖容器内的内部标记管理DOM状态，因此不要直接手动修改容器的子节点（比如innerHTML、appendChild等原生DOM操作），所有内容更新都应该通过render方法完成，这样才能保证其正常工作。

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