仅使用纯 JavaScript（无 jQuery）将元素添加到给定纯文本 HTML 的 DOM答案

【问题标题】：Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)仅使用纯 JavaScript（无 jQuery）将元素添加到给定纯文本 HTML 的 DOM
【发布时间】：2012-05-05 18:47:03
【问题描述】：

我需要能够在给定 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。任何帮助都会很大。

【问题讨论】：

标签： javascript html dom

【解决方案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.

【讨论】：

你应该使用DocumentFragment而不是div；移动子节点会更快，更容易。编辑：删除该评论，因为您无法设置 DocumentFragment 的innerHTML。
切换到 while 循环的编辑修复了 for 循环使用索引的问题，因为 appendChild 实际上从 div 中删除了元素以将其附加到正文。克隆子节点也是一种不太优雅的方法。
@kirps：是的，我终于测试了那个示例代码，发现了“appendChild”的奇怪行为及其对包含父元素的“children”属性的影响。

【解决方案2】：

你可以使用insertAdjacentHTML:

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

除了beforeend 之外还有其他选项，但听起来你想附加到元素上，这是beforeend 所做的。

现场示例：

document.body.insertAdjacentHTML("beforeend", "&lt;div&gt;This is the new content.&lt;/div&gt;");

&lt;div&gt;Existing content in &lt;code&gt;body&lt;/code&gt;.&lt;/div&gt;

与使用 += 和 innerHTML 不同，这不需要浏览器旋转元素的内容并创建一个 HTML 字符串来表示它，销毁这些元素（包括它们上面的任何事件处理程序），并用相同的元素加上你的添加替换它们。它只是添加您的添加内容，保持现有内容不变。

【讨论】：

那是完美的......荣誉
这个答案很完美。通过使用innerHTML，一些网页确实可以工作，例如 Google Calendar、Backlog、Amazon 等（我在控制台中运行）。使用insertAdjacentHTML，对原网页没有影响。非常感谢！

【解决方案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);

应该工作（小提琴：http://jsfiddle.net/gWHVy/）

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

【讨论】：

这可行，但不能回答插入任意原始文本 HTML 的问题。
看看@Aaron 的解决方案。他的方法会很好用。但是，对于您希望在跨度中使用它的特殊情况，此解决方案更简单。

【解决方案4】：

您可以获取要在其下插入 HTML 的元素的 elementId，并使用 innerHTML 来添加 html。

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

【讨论】：

不确定document.getElementById("body") 在我看来会相当... NULL ！ ;-)。使用document.getElementsByTagName('body')[0]

【解决方案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]);
  }
}

【讨论】：