Что лучше в этом случае, document.createElement или document.write?

Question

Хорошо, я создаю html5 canvas / javascript игру. Я играю с идеей сделать ее доступной для всех, кто хочет разместить игру на своем веб-сайте, с помощью одного небольшого фрагмента сценария, который ссылается на внешний файл js.

Внутри внешнего файла js включена вся игра целиком, все, что мне нужно, - это найти лучший способ создать тег canvas с помощью кода 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');

Однако, эта опция также означает, что я должен включить div с внешней ссылкой js, чтобы я мог найти id div и записать в него внутреннюю часть с помощью innerHTML.

Последний совет: Люди смогут скопировать внешнюю ссылку js и вставить ее на свой собственный сайт в теле (она не будет в голове), и, если мой вариант потребует div тег со ссылкой на скрипт, это нормально. Я собираюсь наименьшее количество символов, которое человек должен скопировать / вставить.

Так какой вариант вы бы порекомендовали? Есть ли другой лучший способ, о котором я не упомянул?

Answer 1

_{Я, вероятно, должен ответить на этот вопрос.}

Если вызывается document.write ^[docs] когда HTML разбирается (что, кажется, имеет место), то его вполне можно использовать.

Я бы не стал писать с ним более длинный HTML-код, но с одной строкой HTML все в порядке.

Преимущества document.write: (в данном случае)

Легче для пользователя добавить на свою страницу (просто скопировать и пропустить).

Преимущества innerHTML:

Вы можете предоставить пользователю возможность указать идентификатор элемента, к которому будет добавлен холст.Это увеличивает гибкость для пользователя, но требует дополнительного шага.

Answer 2

document.write устарело, не используйте его.Я бы использовал innerHTML.Добавление одного div совершенно нормально, и это дает людям, которые вставляют игру, больше контроля, где ее вставить.

Answer 3

document.write не очень хорошая идея, так как работает только при вызове до полной загрузки документа.

Хорошая идея - использовать DOM, так как это более x-browser.

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

Answer 4

ППК провел тест по innerhtml против dom, и вот его вывод: http://www.quirksmode.org/dom/innerhtml.html, все голоса / похвалы за innerHTML