Fatal编程技术网
  • javascript/
  • Javascript 如何正确使用innerHTML从html字符串创建元素（可能包含子元素）？

Javascript 如何正确使用innerHTML从html字符串创建元素（可能包含子元素）？

javascript string dom

Javascript 如何正确使用innerHTML从html字符串创建元素（可能包含子元素）？,javascript,string,dom,innerhtml,Javascript,String,Dom,Innerhtml,注意：我不想使用任何框架 目标只是创建一个函数，该函数将返回基于HTML字符串的元素。 假设一个简单的HTML文档，如下所示： <html> <head></head> <body> </body> </html> var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>'); 现在，当您这样调用它时，该函数非常有效

注意：我不想使用任何框架

目标只是创建一个函数，该函数将返回基于HTML字符串的元素。
假设一个简单的HTML文档，如下所示：

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

var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');
现在，当您这样调用它时，该函数非常有效：

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

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

var e=createElement（'
myInnerHTML
'）；
由于创建的元素不是“true”元素这一小问题（可能是大问题），它仍然有一个parentNode“div”。如果有人知道如何解决这个问题，那就太棒了

现在，如果我用更复杂的字符串调用同一个函数：

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

var e=createElement（'
innerHTMLHeading2
'）；
它会创建两个子项，而不是一个子项与另一个子项之间的子项。

一旦执行div.innerHTML=str，则会创建innerHTML而不是

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

`
innerHTML标题2
`
转到

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

`
innerHTML
标题2`
问题：

  • 在使用.innerHTML之后，是否可以在没有父节点的情况下获取元素
  • 我可以（对于稍微复杂的字符串）让我的函数返回一个带有适当子元素的元素，而不是两个元素。[它实际上返回三个，
    ，
    ，以及另一个
    ]
    • 您必须将新元素附加到某个位置。尝试将
    DocumentFragment
    对象与您创建的
    div
    结合使用：

    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;
}

    函数createElement（str）{
var div=document.createElement（'div'）；
div.innerHTML=str；
var container=document.createDocumentFragment（）；
对于（变量i=0；i
    它的开销更大，但它能满足你的需要。请注意，DOM元素“
    .insertAdjacentHTML
    成员函数是HTML5提供的

    对于您传递的复杂字符串，它不是有效的XHTML语法-您不能将块元素作为
    的子元素（
    是块级元素）。

    这与
    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;
}
    （1） 您可以从容器中删除节点（
    removeNode
    ）或克隆节点（
    cloneNode
    ）（2）由于有关
    标记如何工作的复杂规则，因此不适用于该示例。您的
    隐式关闭前面的
    标记，因为
    是块级元素（其他元素也是如此）。pointy所说的

    不是有效的html字符串；）好的，是的，这是有道理的。我们不要进入标签。这就解决了这个问题。您只能使用removeNode删除子项。编辑：nvm。一半的浏览器不支持它。奇怪的是，只有IE。是的，这可能会使用更少的开销。这与另一个相同，只是最后一行应该是frag.childNodes，因为我想要的是元素而不是片段。谢谢这很有帮助。@Sanchit-很高兴这很有帮助o） 我在返回值上来回移动。我认为返回frag将提供更多的可能性，因为它将使您能够在需要时立即附加整个片段，同时仍然保留在
    子节点上进行迭代的可能性。无论如何，使用documentFragment解决了父节点的问题。是的，我知道它现在为什么这么做了。愚蠢的错误，盯着它看了一会儿。所以我差点就吃到了。谢谢