javascript - 使用 DOM Canvas 更新 Canvas 元素

Question

假设我有

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

我也是

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

后记 我对 myCanvas 进行了更改，并希望用我更新的 DOM Canvas 替换 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 上的所有更改将立即反射(reflect)在页面中。

替换子()

如果你想用不同节点替换一个节点，你可以使用.replaceChild()在要替换的节点的父元素上。

示例:

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

其中 parent 是 element 的父元素。

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

内部HTML

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

示例:

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