Как встроить HTML через код JS

Question

Мне нужно дать пользователю фрагмент кода js, который вставит некоторый HTML-код на страницу.

Мне интересно, как лучше всего это сделать.Должен ли я использовать document.write, нужно ли просто создавать все элементы HTML с помощью DOM программно?

Можно ли использовать библиотеку js?Я вижу конфликты, если веб-страница, в которую встроен код, уже содержит библиотеку.

Answer 1

Использование библиотеки, вероятно, слишком тяжело, вставка элементов DOM очень многословна, и document.write может не работать, если целевой сайт использует тип содержимого application/xhtml+xml.Я думаю, что вам лучше всего создать один элемент, используя document.createElement, а затем установить innerHTML на этом.

Answer 2

Предложение:

Вставьте этот DIV туда, где вы хотите, чтобы вывод выводился:

<div id="uniqueTargetID" style="display: none;"></div>

Тогда внизу страницы есть:

<script src="snippet.js"></script>

Этот файл (размещенный удаленно или иным образом) может выводить простой текст следующим образом:

var html = [];
html.push('<h1>This is a title</h1>');
html.push('<p>So then she said, thats not a monkey, its a truck!</p>');
html.push('<p>You shoulda seen his face...</p>');
var target = document.getElementById('uniqueTargetID');
target.innerHTML = html.join('');
target.style.display = 'block';

Я бы не стал использовать document.write (), если бы вы могли помочь.

Answer 3

Javascript ::

//to avoid global bashing
(function(){
  var target = document.getElementById('ScriptName'),
    parent = target.parentElement,
    oput = document.createElement('div');
  oput.innerHTML = "<p>Some Content</p>";
  parent.insertBefore(oput, target);
}());

HTML для предоставления клиенту / людям ::

<script type="text/javascript" id="ScriptName" src="/path/to/ScriptName.js"><script>

ScriptName должен быть чем-то уникальным для вашего скрипта.

Answer 4

Если это простая вставка, вы можете использовать чистый js, в противном случае, если вы хотите предоставить некоторые сложные функции, вы можете использовать библиотеку.В этом случае лучшим выбором будет библиотека, которая не расширяет корневые объекты (Array, Function, String) для предотвращения конфликтов (jQuery в режиме noConflict, YUI и т. Д.).

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