有趣，关于动态创建canvas的问题？

Question

使用js创建canvas发现只有开始标签，没有闭合标签，刚开始我以为canvas是可以省略闭合标签的自闭合标签，但mdn上的解释却是：

</canvas> 标签不可省

与 <img> 元素不同，<canvas>

元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。

var canvas = document.createElement("canvas");

document.body.appendChild(canvas);

//这样创建出来却没有闭合标签，它不像创建div或者span这种一样会自动成对。

这是什么情况呢？

Answer 1

是因为你没有理解mdn里面说的是什么意思。与 <img> 元素不同，<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。所谓的替代元素，是指当canvas不可用时，替代canvas的元素。也就是说如果不带结束标签，那么img标签及之后的所有元素都会被认为是替代元素，将不会被显示。<canvas id="clock" width="150" height="150">&nbsp; <img src="images/clock.png" width="150" height="150" alt=""/></canvas>如上，如果canvas不受浏览器支持，那么在这里显示的就是一个img标签。你可以通过var canvas = document.createElement("canvas");var img = document.createElement("img");canvas.appendChild(img);document.body.appendChild(canvas);来达到如上目的。还有一个更有趣的点。var canvas = document.createElement("canvas");console.log(canvas.outerHTML)//<canvas></canvas>