为什么 jQuery.html() 在 .innerHTML() 失败时工作？

Question

我有一些生成<canvas>元素的代码，我正在尝试将其从 jQuery 更新为现代香草 JS。

根据 inte.net 上的大多数文档，包括StackOverflow 上的这个问题，我试图使用element.innerHTML来替换 jQuery 的html()方法。

然而，这使用element.innerHTML失败，而 jQuery html()工作：

// Fails
// element.innerHTML = qrCodeCanvas.outerHTML;

// Works
$(element).html(qrCodeCanvas);

看到这个JSFiddle

如何用 vanilla JS 替换.html() ？

Answer 1

jQuery .html() function 除了通过.innerHTML更新 DOM 之外还涉及大量工作。 在这种情况下，您已经有了一个 DOM 元素（ <canvas> ），所以.innerHTML没有意义。 jQuery 代码检测到您传递了一个 DOM 元素（而不是作为字符串的 HTML 文本），因此它会为您将其附加到 DOM。

使用.outerHTML会将您的<canvas>变回字符串，但您不希望这样，因为其他代码已经绘制到 canvas 上； 获得 HTML 将失去它。

在这种情况下，相当于.innerHTML的浏览器 API 将是.appendChild() 。