在这种情况下，document.createElement或document.write有什么更好？

Question

好吧，我正在制作一个html5 canvas/javascript游戏。我正在玩弄想让任何想要把游戏放在自己网站上的人通过一个链接到外部js文件的小脚本片段。

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

外部JS链接：

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

这里是帆布一行代码，我需要插入到文档：

<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链接一些元素，这样我可以追加画布它。

3，我的最后一个已知选项是使用..

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

但是，此选项也意味着我必须包括与外部JS链接一个div，这样我可以找到的标识div，并通过innerHTML写入它。

最后提示：人们将能够复制外部js链接并将其粘贴到自己的网站中（不会在头部），并且如果我的选项需要使用div标签脚本链接，这很好。我要尽可能少地复制/粘贴人物。

那么你会推荐什么选项？还有没有更好的方法，我没有提到？

Answer 1

_{我也许应该做这一个答案。}

如果在解析HTML时调用了document.write^[docs]（这似乎是这种情况），那么使用它就很好。

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

优势document.write：（在这种情况下）

更容易为用户添加到他的页面（只是复制和过去的）。

优势innerHTML：

您可以提供用户指定元素的ID追加canvase的选项。这增加了用户的灵活性，但需要额外的步骤。

Answer 2

document.write已弃用，请不要使用它。 我会使用innerHTML。添加一个div是完全正确的，它使插入游戏的人更容易控制插入它的位置。

Answer 3

document.write不是一个好主意，因为它只在文档完全加载之前调用。

一个好主意是使用DOM，因为它是更多的X浏览器。

var canvas = document.createElement('canvas'); 
canvas.setAttribute(...); 
document.getElementById(...).appendChild(canvas); 

Answer 4

PPK已经运行的innerHTML VS DOM的测试，这里是他的发现，http://www.quirksmode.org/dom/innerhtml.html，所有票/赞誉为innerHTML的