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

Question

Мне нужно иметь возможность добавлять элементы на страницу с исходной текстовой строкой 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. Любая помощь будет огромной.

Answer 1

Попробуйте назначить на innerHTML property анонимного элемента и добавления каждого из его 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. 

Answer 2

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

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

Answer 3

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

Shoud работа (скрипка: http://jsfiddle.net/gWHVy/)

Answer 4

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]); 
    } 
}