如何正确使用innerHTML从html字符串中创建元素(可能有子元素)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (68)

注:我希望使用任何框架。

目标只是创建一个函数,该函数将返回基于HTML字符串的元素。

假设一个简单的HTML文档就像这样:

<html>
<head></head>
<body>
</body>
</html>

所有提到的功能都包含在头部中,所有的DOM创建/操作都在脚本标签的主体末尾完成。

我有一个函数createElement,它将格式良好的HTML字符串作为参数。它是这样的:

function createElement(str)
{
  var div = document.createElement('div');
  div.innerHTML = str;
  return div.childNodes;
}

现在,当调用它时,这个功能很好用:

var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');

由于该元素创建的次要(可能是巨大的)问题不是“real”元素,它仍然具有“div”的父节点。如果有人知道如何解决这个问题,那就太棒了。

现在,如果我用更复杂的字符串调用相同的函数:

var e = createElement('<p id="myId" class="myClass">innerHTML<h2 id="h2ID" class="h2CLASS">Heading2</h2></p>');

它创造了两个孩子而不是一个孩子与另一个孩子有另一个孩子。 一旦做div.innerHTML = str。innerHTML而不是

`<p id="myId" class="myClass">innerHTML    <h2 id="h2ID" class="h2CLASS">Heading2</h2>    </p>`

转向

`<p id="myId" class="myClass">innerHTML</p>        <h2 id="h2ID" class="h2CLASS">Heading2</h2>`

问题:

  1. 在使用.innerHTML之后,我能以某种方式获取没有父节点的元素吗?
  2. 我可以(在稍微复杂的字符串的情况下)让我的函数返回一个元素与适当的孩子,而不是两个元素。[它实际上返回三个,<p.myClass#myId><h2.h2CLASS#h2ID>,和另一个<p>]
提问于
用户回答回答于

这与答案类似palswim,不同之处在于它不会创建克隆,while()而是使用循环代替,始终将节点附加到[0]

function createElement( str ) {
    var frag = document.createDocumentFragment();

    var elem = document.createElement('div');
    elem.innerHTML = str;

    while (elem.childNodes[0]) {
        frag.appendChild(elem.childNodes[0]);
    }
    return frag;
}
用户回答回答于

必须在某处附加新元素。尝试DocumentFragmentdiv创建的对象结合使用:

function createElement(str) {
    var div = document.createElement('div');
    div.innerHTML = str;
    var container = document.createDocumentFragment();
    for (var i=0; i < div.childNodes.length; i++) {
        var node = div.childNodes[i].cloneNode(true);
        container.appendChild(node);
    }
    return container.childNodes;
}

这是更多的开销,但它做想要的。请注意,DOM元素的.insertAdjacentHTML成员函数即将出现在HTML5中。

对于传递的复杂字符串,它不是有效的XHTML语法 - 不能将块元素作为<p><h2>是块级元素)的子元素。

扫码关注云+社区

领取腾讯云代金券