InnerHTML每次都会创建新节点(新引用)

时间:2018-09-20 10:37:58

标签: javascript

我正在通过DOMImplementation.createHTMLDocument()创建一个文档对象,并且要插入带有innerHTML属性的html。 之后,我将节点附加到现实中,如下所示:

function appenderController (nodes,target,uid){

    for(let i = 0 ; i < nodes.children.length ; i++) {
        if(nodes.children[i].children.length > 0){
            if(nodes.nodeType === "9"){
                appenderController(nodes.children[i],target);
                continue;
            }

            let realnode = appender(target, nodes.children[i]);
            appenderController(nodes.children[i],realnode);

        }
        if (uid && nodes.children[i].nodeName.toLowerCase() === uid) {
            nodes.children[i].remove();
            return;
        }
        appender(target, nodes.children[i]);
    }




}

在某些情况下,我会向文档中添加更多html,并且因为innerhtml会再次创建整个文档,所以我还向每个节点添加了特殊属性,以跟踪已添加的节点。 当我用appenderController递归调用nodes = fakedocument.body时出现问题,但是在另一个函数中,我正在更新我们的fakedocument的innerhtml,在appenderController的下一次迭代中,它将继续在旧的fakedocument.body上进行迭代。 ,即使我使用innerhtml并再次更新节点,也如何保留对假文档的引用

示例:

var html='
    <html>
    <head>
    </head>
    <body>
    <div id="somediv1"></div>
    </body>
    </html>'
;

var dom = document.implementation.createHTMLDocument();

dom.documentElement.innerHTML = html;

var body = dom.body;

var html2='
    <html>
    <head>
    </head>
    <body>
    <div id="somediv1"></div>
    <div id="somediv2"></div>
    </body>
    </html>'
;

dom.documentElement.innerHTML = html2;

现在,如果我们查看“ body” var,就不会有“ somediv2”,这正是我的函数中发生的事情,在某种程度上,我正在更新我的伪造文档的innerhtml,但是“ appenderController”继续迭代旧节点

1 个答案:

答案 0 :(得分:0)

为每个元素分配唯一的ID。然后,按ID访问元素,既可以访问真实DOM,也可以访问临时DOM。

请勿存储对元素的引用,而应存储其ID。

您还可以从一个import到另一个DOM节点,而不用使用innerHTML替换整个树。这种方法不会干扰父元素的迭代。

https://developer.mozilla.org/en-US/docs/Web/API/Document/importNode