如何以最小的性能開銷將DOM元素的內容包裝到另一個元素中？

Question

我想將DOM元素的實時內容包裝到另一個元素中，保持所有結構和所有附加的事件偵聽器不變。

例如，我想這

<div id="original"> 
    Some text <i class="icon></i> 
</div> 

成爲

<div id="original"> 
    <div id="wrapper"> 
    Some text <i class="icon></i> 
    </div> 
</div> 

優選不jQuery的。

Answer 1

更新答案：

這應該更好地工作和一個比我以前的答案更少的代碼。

var content = document.getElementById("myList").innerHTML; 
document.getElementById("myList").innerHTML = "<div id='wrapper'></div>" 
document.getElementById("wrapper").innerHTML = content; 

編輯：這將破壞連接到子節點的任何事件偵聽器。

---

以前的答案：

我沒有嘗試過，但這樣的事情應該工作：

var wrapper = document.createElement("DIV"); 
wrapper.id = "wrapper"; 
var content = document.getElementById("myList").childNodes; 
document.getElementById("myList").appendChild(wrapper); 
document.getElementById("wrapper").appendChild(content); 

1. 創建包裝元素。
2. 獲取我的列表內容。
3. 將包裝元素添加到myList中。
4. 將myList的內容添加爲包裝元素的子元素。

Answer 2

如果沒有別的比ID等來區分你的節點，並考慮到 #original具有多個子節點，它很可能是簡單的創建一個新的父節點，並插入：

var original = document.getElementById('original'); 
var parent = original.parentNode; 

var wrapper = document.createElement('DIV'); 
parent.replaceChild(wrapper, original); 
wrapper.appendChild(original); 

然後將ID來對地方了：

wrapper.id = original.id; 
original.id = 'wrapper'; 

指出，當然，這兩個變量 original和 wrapper現在在「W點數榮「元素。哦，你想留下聽衆...技術上，他們仍然是，但他們現在連接到內部元素，而不是外部元素。

EDIT 2修訂後的答案，留下附着於原始元素的事件監聽器（即現在的外層div）：

var original = document.getElementById('original'); 
var wrapper = document.createElement('DIV'); 
wrapper.id = 'wrapper'; 
while (original.firstChild) { 
    wrapper.appendChild(original.firstChild); 
} 
original.appendChild(wrapper); 

這工作簡單地通過連續的每個子節點遷出原來的div進入新的父母，然後將新的父母移回原來的孩子。

這個答案的前一個版本的缺點是，你必須逐個遍歷所有的孩子。

用於演示

Answer 3

見https://jsfiddle.net/alnitak/d0jss2yu/或者，做這種方式。它還在相鄰的結果div中顯示結果。

<div id="original"> 
 
    Some text <i class="icon"></i> 
 
</div> 
 

 
<button onclick="myFunction()">do it</button> 
 

 
<p type="text" id="result"></p> 
 

 
<script> 
 
function myFunction() { 
 
    var org = document.getElementById("original"); 
 
    var i = org.innerHTML; //get i tag content 
 
    var wrap = document.createElement("div"); //create div 
 
    wrap.id="wrapper"; //set wrapper's id 
 
    wrap.innerHTML= i //set it to i tag's content 
 
    org.innerHTML=""; // clear #orignal first 
 
    org.appendChild(wrap); //append #wrapper and it's content 
 
    
 
    var result = org.outerHTML; 
 
    document.getElementById("result").innerText = result; 
 
} 
 
</script>