在空元素周圍創建元素

我試圖得到一個解決方案來創建一個新的元素，並將其附加到一個空的元素，如IMG，INPUT的我可以easly只是添加一個父元素IMG或輸入，但我寧願只通過DOM做。迄今爲止唯一能夠做到這一點的方法是使用cloneNode並將其附加到新創建的元素。在空元素周圍創建元素

例如，通過DOM添加一個DIV周圍已經存在IMG

前：

<input type="text" />

後：

<div><input type="text" /></div>

這是我創造和作品，但因爲它刪除節點的默認值被抹去，我希望有一個更簡單的方法來創建和元素和附加輸入

<input id="ic706" type="text" />

。

var e = document.getElementById("ic706") 
var cloned = e.cloneNode(false); 

e.parentNode.removeChild(e); 

var c = document.createElement("div"); 
c.id = "container"; 

document.body.appendChild(c); 
document.getElementById("container").appendChild(cloned);

來源

2013-02-10 david

我建議：

function wrapElem(el, wrapWith) { 
    var newElem = document.createElement(wrapWith); 
    el.parentNode.insertBefore(newElem, el); 
    newElem.appendChild(el); 
} 

wrapElem(document.getElementsByTagName('input')[0], 'div');

JS Fiddle demo。

，似乎preserve event-binding。

這是通過創建一個新元素，將其插入要包裝的元素之前，然後移動元素將包裝爲包裝，而不是刪除和重新創建;所以這個應該保留綁定到該元素的任何事件和屬性。

來源

2013-02-10 17:56:36

是它的劑量非常好，謝謝 – david 2013-02-10 18:02:49

非常歡迎！ – 2013-02-10 18:03:25

比較原始的解決方案（但簡單的遵循）：

var elem = document.getElementById('test'); 
elem.outerHTML = '<ul><li>' + elem.outerHTML + '</li></ul>';

來源

2013-02-10 18:02:25 SmokeyPHP

+1感謝您的建議，但使用outerHTML不被舊的火狐版本支持所以不能接受這個作爲答案 – david 2013-02-10 18:16:57

不用擔心，不知道的，需要這樣一箇舊版本的Firefox支持！ – SmokeyPHP 2013-02-10 18:43:16

在空元素周圍創建元素

回答

相關問題