我需要能够在给定 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。任何帮助都是巨大的。
尝试分配给匿名元素的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.
您可以使用insertAdjacentHTML：
document.body.insertAdjacentHTML("beforeend", theHTMLToInsert);
除了 之外还有其他选项beforeend，但听起来您想附加到元素，这就是beforeend。
现场示例：
与使用+=with不同innerHTML，这不需要浏览器遍历元素的内容并创建一个 HTML 字符串来表示它，销毁这些元素（包括它们上的任何事件处理程序），并用相同的元素替换它们加上你的补充。它只是添加您的添加内容，而现有内容保持不变。
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/）
您可以获取要在其下插入 HTML 的元素的 elementId，并使用 innerHTML 来添加 html。
document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>";
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]);
}
}