如何让Chrome重新评估修改后的DOM？自定义标签替换异常求助

这个问题的核心是原生DOM的replaceWith方法和jQuery的replaceWith方法对HTML字符串的处理逻辑完全不同，才导致了渲染结果的差异：

解决方案1：统一使用jQuery的replaceWith方法 #

既然处理#bbb时用jQuery能正常解析HTML，那处理<fish>元素时也沿用jQuery的方法就行，不用切换到原生DOM操作：

$('#bbb').replaceWith('<div>BBBB</div>');
$('fish').replaceWith('<div>CCCC</div>'); // 用jQuery方法而非原生DOM方法

解决方案2：用原生DOM方法时先解析HTML字符串 #

如果你一定要用原生DOM操作，不能直接把HTML字符串传给replaceWith（原生方法会把字符串当作纯文本处理），需要先把字符串转换成DOM元素再替换：

$('#bbb').replaceWith('<div>BBBB</div>');
// 方式1：直接创建元素并设置内容
const cccDiv = document.createElement('div');
cccDiv.textContent = 'CCCC';

// 方式2：用template解析更复杂的HTML（适合多标签场景）
// const temp = document.createElement('template');
// temp.innerHTML = '<div>CCCC</div>';
// const cccDiv = temp.content.firstChild;

$('fish')[0].replaceWith(cccDiv);

问题根源拆解 #

• jQuery的replaceWith方法内部做了封装：它会自动把传入的HTML字符串解析为对应的DOM元素，再完成替换操作，所以能正常渲染出<div>BBBB</div>的内容。
• 而原生DOM的Element.replaceWith()方法，当你直接传入字符串时，它会把这个字符串当作纯文本节点插入到DOM中，不会解析HTML标签，所以就会把<div>CCCC</div>原封不动地显示成文本，而不是渲染成div元素。

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