使用 DOM 画布更新画布元素

Question

假设我已经

var myCanvas = document.createElement('canvas');

并且在

myCanvas.setAttribute("id", "my-canvas");
document.body.appendChild(myCanvas);

后记中对 myCanvas 进行了更改，并希望用更新的 DOM 画布替换 html-canvas。以下内容有效：

document.getElementById("my-canvas").innerHTML = myCanvas;

但是 html（通过检查器）看起来像

<canvas id="my-canvas">[object HTMLCanvasElement]</canvas>

当它应该看起来像时

<canvas id="my-canvas"></canvas>

如何更新元素而不使用 innerHTML？

Answer 1

如果 myCanvas 仍然是同一节点，则不必更新它。当您创建一个节点并将其附加到 DOM 时，那么该 DOM 节点就是活动。这意味着 myCanvas 上的所有更改都将立即反映在页面中。

"

如果您想用不同的节点替换节点，您可以使用 .replaceChild() 位于要替换的节点的父元素上。

示例：

document.getElementById("parent").replaceChild(element, newElement);

其中 parent 是 element 的父元素。

<div id="parent">
  <canvas id="element"></canvas>
</div>

innerHTML

在您的问题中，您使用的是 innerHTML。如果您只想将一个元素的内容替换为另一个元素的内容，请对这两个元素使用 innerHTML 。

示例：

document.getElementById("element").innerHTML = newElement.innerHTML;