功能鏡像insertAdjacentHTML

我試圖寫一個函數來反映insertAdjacentHTML DOM方法Element.insertAdjacentHTML在這裏它是功能鏡像insertAdjacentHTML

function insertAdjacent(targetElement) { 
'use strict'; 
return { 
    insertAfter: function (newElement, targetElement) { 
     var parent = targetElement.parentNode; 
     if (parent.lastChild === targetElement) { 
      parent.appendChild(newElement); 
     } else { 
      parent.insertBefore(newElement, targetElement.nextSibling); 
     } 
    }, 

    insertAtBegin: function (newElement) { 
     var fChild = targetElement.firstChild; 
     if (!fChild) { 
      targetElement.appendChild(newElement); 
     } else { 
      targetElement.insertBefore(newElement, fChild); 
     } 
    }, 

    insertAtEnd: function (newElement) { 
     var lChild = targetElement.lastChild; 
     if (!lChild) { 
      targetElement.appendChild(newElement); 
     } else { 
      this.insertAfter(newElement, targetElement.lastChild); 
     } 
    } 
}; 
}

當你插入的開始和結束的兩個不同的元素節點功能工作正常顯示爲here。但是，當我嘗試在開頭和結尾處插入相同的元素節點時出現問題，如here所示。它只在最後插入元素節點，而不是在開始和結束時都插入。什麼可能導致此問題？謝謝

來源

2015-06-25 kellymandem

，因爲一個element不能在兩個地同時進行插入，如果你想這樣做，在每個函數的第一行，添加newElement = newElement.cloneNode(true);我已經改變了你的第二jsfiddle，看看。

來源

2015-06-25 09:38:52 fuyushimoya

謝謝@fuyushimoya，我現在得到問題所在 – kellymandem

的問題是，您使用的是完全相同的元素，它只能被放置在一個地方......

如果克隆它，應該不會有問題。 Here's your second fiddle完全按照你寫它，有一個額外的deepCopy function from this answer：

adjacentInsert.insertAtBegin(deepCopy(span1));

來源

2015-06-25 09:56:22 Armfoot

我可以保證這@Armfoot，我不明白'deepCopy'功能但無論如何謝謝 – kellymandem

@ kellymandem沒有問題，深度克隆將有助於比目前更復雜的元素...如果偶然想要覆蓋數組，日期或其他，可以使用該函數而不必擔心導入特定這樣做的東西（例如jQuery）。它基本上涵蓋了很多情況，並且通常定義了'Object.create'，所以[你可以忽略最後一個創建函數]（https://jsfiddle.net/s5sje3pL/5/）:) – Armfoot

@kellymandem並且順便說一下，如果你喜歡在_fuyushimoya_的回答中只使用'cloneNode'，那麼你只需要使用它一次（而不是3）[比如'adjacentInsert.insertAtEnd（span1.cloneNode（true））;']（https：/ /jsfiddle.net/s5sje3pL/9/）。 – Armfoot

功能鏡像insertAdjacentHTML

回答

相關問題