使用DOM画布更新canvas元素

Question

让我说我有

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

而我呢

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

后来我改变了myCanvas并希望用我更新的画布替换 html- DOMcanvas.以下作品:

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它们.

例:

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