replaceWith方法将输入识别为字符串而非HTML元素该如何解决？

问题根因 #

原生DOM API replaceWith() 存在默认行为：当传入参数为字符串类型时，会默认将其作为纯文本节点插入，不会解析为HTML结构，因此会直接显示完整的标签文本。

正确实现方案 #

原生JS版本（无框架依赖，适配Twig返回的HTML字符串场景）

function replaceItem(item, html) {
    if (!item) return;
    // 临时容器用于解析HTML字符串为DOM节点
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = html;
    // 展开所有解析后的子节点执行替换，支持传入多根节点的HTML结构
    item.replaceWith(...tempContainer.childNodes);
}

jQuery版本（如果项目依赖jQuery）

jQuery的replaceWith()原生支持HTML字符串解析，直接调用即可：

function replaceItem(item, html) {
    $(item).replaceWith(html);
}

之前写法无效的原因 #

• 第一种写法中的create.element(html)不是原生JS标准API，语法本身存在错误，无法生成合法的DOM节点
• 第二种写法中replaceWith()的返回值为undefined，调用undefined.html()会直接抛出语法错误，逻辑不成立

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