javascript - 在这种情况下，document.createElement 或 document.write 哪个更好？

Question

好的，我正在制作一个 html5 canvas/javascript 游戏。我正在考虑通过一个链接到外部 js 文件的小脚本片段，让任何想要将游戏放在自己网站上的人都可以使用它。

在外部 js 文件中，整个游戏都包含在内，我只需要找到通过 javascript 代码创建 Canvas 标签的最佳方法。

外部js链接:

<script src="http://host.com/game.js"></script>

这是我需要插入到文档中的单行 Canvas 代码:

<canvas id="canvas" style="display:block;margin:0px auto;" width="600" height="550">Your browser does not support the HTML5 canvas element.</canvas>

<强>1。我的第一个选择是使用..

document.write('<canvas id="canvas" style="display:block;margin:0px auto;" width="600" height="550">Your browser does not support the HTML5 canvas element.</canvas>');

但是，据我所知，document.write 是不受欢迎的。

<强>2。我的下一个选择是使用..

document.createElement(canvas);
document.setAttribute(.....);
document.appendChild(....);

但是，此选项意味着我必须包含一个 div 或一些带有外部 js 链接的元素，以便我可以将 Canvas 附加到它。

<强>3。我最后一个已知的选择是使用..

document.getElementById('divWrapper').innerHTML('my canvas code');

但是，这个选项也意味着我必须包含一个带有外部 js 链接的 div，这样我才能找到 div 的 id，并通过 innerHTML 在其中写入。

最后提示:人们将能够复制外部 js 链接并将其粘贴到自己网站的正文中，(它不会在头部)，如果我的选项需要带有脚本链接的 div 标签，这很好。我打算让人们必须复制/粘贴的字符最少。

那么您会推荐什么选项？还有其他我没有提到的更好的方法吗？

Answer 1

_{我应该把这个作为答案。}

如果document.write ^[docs]在解析 HTML 时调用(似乎是这种情况)，那么使用它就完全没问题了。

我不会用它写更长的 HTML 代码，但是一行 HTML 就可以了。

document.write 的优点:(在本例中)

用户更容易添加到他的页面(只需复制和过去)。

innerHTML 的优点:

您可以为用户提供选项来指定要将 Canvas 附加到的元素的 ID。这增加了用户的灵 active ，但需要额外的步骤。