在這種情況下，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的