javascripthtmlcanvas

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

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.

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.

The external js link:

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

Here is the single 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 would be 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 is frowned upon from what I understand.

2. My next option is to use..

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

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. My last known option is to use..

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

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.

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.

So what option would you recommend? Is there another better way that I didn't mention?

Solution

  • I should probably make this an answer.

    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.

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

    Advantages of document.write: (in this case)

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

    Advantages of innerHTML:

    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.