Добавляйте элементы в DOM, используя простой текстовый HTML, используя только чистый JavaScript (без jQuery)

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

 var theElement = document.createElement("<h1 id='title'>Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>");

document.getElementById("body").appendChild(theElement);

Очевидно, что это не работает, я ищу хорошие способы достижения такого же результата. Я бы хотел, чтобы избежать разбора HTML, если это возможно. Я сильно ограничен инструментами, которые я могу использовать, ни один jQuery или снаружи не включает и должен быть кросс-браузерным и обратно совместимым с IE6. Любая помощь будет огромной.

Ответ 1

Попробуйте присвоить innerHTML свойство анонимного элемента и добавить все его children.

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
    el.appendChild(div.children[0]);
  }
}
var html = '<h1 id="title">Some Title</h1><span style="display:inline-block; width=100px;">Some arbitrary text</span>';
appendHtml(document.body, html); // "body" has two more children - h1 and span.

Ответ 2

var el =  document.createElement("h1")
el.id="title";
el.innerHTML = "Some title";
document.body.appendChild(el);

var el2 =  document.createElement("span")
el2.style.display="block";
el2.style.width="100%";
el2.innerHTML = "Some arb text";
document.body.appendChild(el2);

Шоуд (скрипка: http://jsfiddle.net/gWHVy/)

edit: Это решение для специального случая, в котором вы знаете свойства прямых детей того, что вы хотите вставить. Взгляните на решение Аарона, которое работает в общем случае.

Ответ 3

Вы можете получить elementId элемента, под которым вы хотите вставить HTML, и использовать innerHTML для добавления html.

document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>";

Ответ 4

Вы можете использовать insertAdjacentHTML:

document.body.insertAdjacentHTML("beforeend", theHTMLToInsert);

Есть другие варианты, чем beforeend, но это звучит, как вы хотите добавить к элементу, который является то, что beforeend делает.

Живой пример:

document.body.insertAdjacentHTML("beforeend", "<div>This is the new content.</div>");

<div>Existing content in <code>body</code>.</div>

Ответ 5

Решение

maerics немедленно устранило мою проблему. Мне, однако, нужно было быстро настроить его, чтобы делать то, что мне нужно. У меня есть несколько сценариев и таблиц стилей, которые загружаются при нажатии. Я не могу добавить сценарии или таблицы стилей как фактические объекты в DOM после загрузки. Если вы установите innerHTML, скажем, document.body, чтобы содержать часть <link rel="stylesheet" />, он будет печатать только текст, и браузер не узнает его как объект ссылки. Чтобы исправить это, я использовал следующий код.

function appendHtml(el, str) {
  var div = document.createElement('div');
  div.innerHTML = str;
  while (div.children.length > 0) {
      if ( div.children[0].tagName == 'LINK' ) {
          // Create an actual link element to append later
          style = document.createElement('link');
          style.href = div.children[0].href;
          // append your other things like rel, type, etc
          el.appendChild(style);
      }
      el.appendChild(div.children[0]);
  }
}