59

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

4

5 回答 5

81

尝试分配给匿名元素的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.
于 2012-04-25T05:14:24.037 回答
25

您可以使用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>

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

于 2018-07-19T21:46:27.610 回答
14 
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 解决方案。

于 2012-04-25T05:18:17.637 回答
8

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

document.getElementById("body").innerHTML = "<h1 id='title'>Some Title</h1><span>test</span>";
于 2012-04-25T05:14:17.490 回答
3

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]);
  }
}
于 2012-08-20T18:08:40.290 回答