jQuery的與普通的JavaScript：構建DOM樹

當我問的問題關於解析爲標題的文件，並（通過和無序列表）jQuery的與普通的JavaScript：構建DOM樹

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

在創建嵌套DOM結構追加並使用appendChild之間的差異第二個答案的解決方案，提出隨着小提琴： http://jsfiddle.net/fA4EW/

的解決方案是接近，但似乎並沒有包含引號的屬性元素的工作，所以我試圖重構它在jQuery的http://jsfiddle.net/funkyeah/s8m2t/3/

我覺得我真的很接近使它工作，但解決之間的不同如何

榆樹/ li.appendChild和我的代碼$榆樹/ li.append（他們似乎返回不同的值，並修改榆樹/ $榆樹對象不同）

 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;

來源

2013-07-03 funkyeah

你能不能展示一個沒有引用屬性的代碼示例？ – Bergi

我試着做一個類似的小提琴，但它似乎工作。我對原始問題的第二個答案「爲什麼不起作用」的原因的評估可能不正確（可能只是用戶錯誤）。我必須現在去嘗試和重現。我仍然認爲這個例子中爲什麼兩個方法表現不同的問題仍然有效。不重要的是，我也相信找到一個基於jQuery的解決方案是有價值的。 – funkyeah

追加和使用appendChild

幸福感的差異，jQuery variant更強勁。它還需要多個參數，類型爲htmlString，jQuery集合或者數組元素，甚至是一個回調函數。如果要插入多個父母，它會自動克隆這些元素。 native method僅佔用單個節點（或單個DocumentFragments）。

他們似乎返回不同的值

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

這似乎是你的代碼中的問題，一個天真的轉換會導致不同的li值。如果你確實需要讓孩子回來（有更簡單的解決方案），你可以看看.appendTo method。

和修改榆樹/ $榆樹對象不同

不，他們沒有。兩者都將附加元素放在父級子集合的末尾。您可能在設置返回值的innerHTML值時出現問題，這不符合您的預期（請參閱上文）。

來源

2013-07-03 15:42:16 Bergi

所以用jQuery做這件事的問題似乎是我的$ elm只會是我創建的節點，而不是指向我當前正在構建的子節點的指針（就像在第一個解決方案中一樣）。。因此，$ elm.parent（）。parent（）將無法正常工作，因爲我沒有正確構建整個結構 – funkyeah

整體elm對象如何不被破壞並每次都替換爲ul elm = li.appendChild（document 。的createElement（「UL」））;被稱爲 – funkyeah

appendTo是解決方案...至少對我的方法...我sitll不明白上述問題，但http://jsfiddle.net/Sydky/1/演示appendTo工程 – funkyeah

jQuery的與普通的JavaScript：構建DOM樹

回答

相關問題