What is better in this case document.createElement or document.write?

Question

Ok, so I am doing html5 canvas / javascript. I play with the idea of ​​making it available to anyone who wants to put the game on their own site, using a small script fragment that links to an external js file.

The entire game is included inside the external js file, all I need to do is find the best way to create a canvas tag using javascript code.

External link js:

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

Here is one line of canvas code that I need to insert into the document:

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

1. My first option is to use.

 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>'); 

However, document.write does not agree with what I understand.

2. My next option is to use.

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

However, this option means that I should include a div or some element with an external js link, so I can add a canvas to it.

3. My last known option is to use.

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

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

Last tip: People will be able to copy the js external link and paste it into their own website in the body (it will not be in the head), and if my option requires a div with a script link, this is fine. I am going for the smallest number of characters that a person needs to copy / paste.

Which option would you recommend? Is there any other better way that I haven't mentioned?

Answer 1

_{I probably should answer this question.}

If document.write ^[docs] is called when parsing HTML (which seems to be the case), then it is great for use.

I would not write long HTML code with it, but one line of HTML is fine.

Benefits of document.write : (in this case)

It’s easier to add a user to your page (just copy and skip).

Benefits of innerHTML :

You can provide the user with the ability to specify the identifier of the item to add the canvas to. This increases flexibility for the user, but requires an additional step.

Answer 2

document.write deprecated, do not use it. I would use innerHTML. Adding one div is completely fine, and it gives people who embed the game more control over where to embed them.

Answer 3

document.write is not a good idea, since it only works when called before the document is fully loaded.

It is a good idea to use the DOM as it is more of an x-browser.

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

Answer 4

PPK ran an innerhtml test against dom, and here is its output: http://www.quirksmode.org/dom/innerhtml.html , all voices / praise for innerHTML