javascript - jQuery 与普通 javascript : differences between append and appendChild when building DOM tree

Question

我问了有关解析文档标题和创建嵌套 dom 结构(通过和无序列表)的问题

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

在第二个答案中提出了一个解决方案以及一个 fiddle : 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

differences between append and appendChild

嗯，jQuery variant更健壮。它还接受多个参数，类型为 htmlString、jQuery 集合或元素数组，甚至是回调函数。如果要将元素插入多个父项，它会自动克隆元素。 native method仅采用单个节点(或单个 DocumentFragments)。

they seem to return different values

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

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

and modify the elm/$elm object differently

不，他们没有。两者都将追加的元素放在父子集合的末尾。您可能在设置返回值的 innerHTML 值时遇到问题，这不是您所期望的(见上文)。