使用纯JavaScript(无jQuery)为纯文本HTML添加元素到DOM

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属性并附加其中的每个元素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

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

编辑: 这是一个特殊情况的解决方案,您知道要插入的直接子项的属性.看一下在一般情况下工作的Aaron的解决方案.

Answer 3

您可以使用insertAdjacentHTML：

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

除了以外beforeend，还有其他选项，但这听起来像是您想附加到元素上，这就是beforeend它的作用。

现场示例：

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

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

与+=with相比innerHTML，这与浏览器不同，它不需要浏览器浏览元素的内容并创建一个HTML字符串来表示它，销毁这些元素（包括它们具有的所有事件处理程序），并用相同的元素代替您的补充。它只是添加您的添加内容，而使现有内容保持不变。

Answer 4

您可以获取要插入HTML的元素的elementId,并使用innerHTML添加html.

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