在这种情况下，最好是document.createElement或document.write？ [英] What is better in this case, document.createElement or document.write?

问题描述

好的，所以我正在做一个html5 canvas / javascript游戏。我正在考虑通过任何链接到外部js文件的小脚本片段，将其提供给想要将游戏放在自己网站上的任何人的想法。

Ok, so I'm making an html5 canvas/javascript game. I'm playing around with the idea of making it available to anyone who wants to put the game on their own website, via one little script snippet that links to an external js file.

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

Inside the external js file, the whole entire game is included, all I need is to find the best way to create a canvas tag via javascript code.

外部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对此并不满意。

However, document.write is frowned upon from what I understand.

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

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

但是，此选项意味着我必须在外部js链接中包含div或某些元素，以便我可以在其上附加画布。

However, this option means I must include a div or some element with the external js link, so that I can append the canvas to it.

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

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

但是，此选项还意味着我必须在外部js链接中包含一个div，这样我才能找到div的ID，然后通过innerHTML编写它。

However, this option also means I must include a div with the external js link, so that I can find the id of the div, and write inside it via innerHTML.

最后一个提示：人们将能够复制外部js链接并将其粘贴到自己体内的网站上（不会放在头部），如果我的选项需要带有脚本链接的div标签，那就很好。我要尽量减少该人必须复制/粘贴的字符。

Last tip: People will be able to copy the external js link and paste it on their own website in the body, (it will not be in the head), and if my option requires a div tag with the script link, that is fine. I'm going for the least amount of characters that the person has to copy/paste.

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

推荐答案

_{我应该将其设置为答案。}

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

If document.write ^[docs] is called when the HTML is parsed (which seems to be the case), then it's perfectly fine to use it.

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

I would not write longer HTML code with it, but one line of HTML is ok.

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

Advantages of document.write: (in this case)

更易于用户添加到他的页面（只需复制和粘贴）。

Easier for the user to add to his page (just copy and past).

innerHTML ：

Advantages of innerHTML:

您可以为用户提供选项，以指定要附加画布的元素的ID。这样可以为用户增加灵活性，但需要执行其他步骤。

You could provide the user the option to specify the id of the element to append the canvase to. This increases the flexibility for the user, but requires an additional step.

这篇关于在这种情况下，最好是document.createElement或document.write？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！