在空元素周围创建元素

我试图得到一个解决方案来创建一个新的元素，并将其附加到一个空的元素，如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

在空元素周围创建元素

回答

相关问题