jQuery与普通javascript：构建DOM树时append和appendChild之间的差异

Question

我问过关于为标题解析文档和创建嵌套dom结构的问题（通过和无序列表）

how to robustly parse a document for any headings and build a <ul> tree of just those headings

在第二个答案中，提出了一个解决方案： http://jsfiddle.net/fA4EW/

解决方案很接近，但似乎不适用于包含引号属性的元素，所以我尝试在jQuery中重构它http://jsfiddle.net/funkyeah/s8m2t/3/

我觉得我真的很接近它的工作，但解决了如何

之间的差异

elm / li.appendChild和我的代码$ elm / li.append（它们似乎返回不同的值并以不同方式修改elm / $ elm对象）

      do {
            li = elm.lastChild;
            if(li == null)
                li = elm.appendChild(document.createElement("li"));
            elm = li.appendChild(document.createElement("ul"));
            cnt++;
        } while(cnt < (curLv - lv));
    }
    li = elm.appendChild(document.createElement("li"));
    // replace the next line with archor tags or whatever you want
    li.innerHTML = node.innerHTML;

Answer 1

  

append和appendChild之间的区别

嗯，jQuery variant更强大。它还需要多个参数，类型为htmlString，jQuery集合或元素数组，甚至是回调函数。如果要将元素插入多个父元素，它会自动克隆元素。 native method只接受单个节点（或单个DocumentFragments）。

  

他们似乎返回不同的值

是。 .append()返回上下文jQuery集合（它附加到它），而.appendChild返回附加元素。

这似乎是代码中的问题，天真的转换会导致不同的li值。如果您确实需要让孩子回来（有更简单的解决方案），您可以查看.appendTo method。

  

以不同方式修改elm / $ elm对象

不，他们没有。两者都将附加元素放在父级子集合的末尾。您可能在设置返回值的innerHTML值时遇到问题，这与您的预期不符（见上文）。