为何jQuery.html()可用而element.innerHTML失效？如何用原生JS替代？

你遇到的问题核心是：jQuery的.html()方法和原生innerHTML的处理逻辑不一样。

当你给jQuery的.html()传入DOM元素（比如你的qrCodeCanvas）时，它会直接把这个已存在的DOM元素移动/插入到目标元素里，同时清空目标元素原有内容；而innerHTML只能接收HTML字符串——你用qrCodeCanvas.outerHTML得到的是canvas的HTML代码字符串，用它设置innerHTML会创建一个全新的空canvas元素，自然看不到原来绘制的内容。

用原生JS实现和$(element).html(qrCodeCanvas)完全一致的效果，有两种简单方法：

方法1：清空后追加元素 #

// 先清空目标元素的所有子内容
element.innerHTML = '';
// 将已有的canvas元素添加进去
element.appendChild(qrCodeCanvas);

方法2：使用replaceChildren（现代浏览器推荐） #

这是ES6+新增的API，一步完成清空+添加：

element.replaceChildren(qrCodeCanvas);

这两种方法都会保留你原来绘制好内容的canvas元素，和jQuery的效果完全一致。

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