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

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。

Answer 3

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

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

Answer 4

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

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

Answer 5

maerics解决方案马上解决了我的问题。然而，我需要快速调整它以完成我需要的工作。我有几个脚本和样式表加载点击。我无法将脚本或样式表添加为DOM后加载的实际对象。如果为say，document.body设置innerHTML以包含<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]);
  }
}

仅使用纯JavaScript（无jQuery）为纯文本HTML添加元素到DOM

5 个答案: