Question

我试图找到一个解决方案来创建一个新元素并将其附加到像IMG，INPUT这样的空元素周围我可以很容易地在IMG或INPUT周围添加一个父元素，但我宁愿只通过DOM来做。到目前为止，我唯一能够做到这一点的方法是使用cloneNode并将其附加到新创建的元素。

示例通过DOM在已经存在的IMG周围添加DIV

在：

<input type="text" />

后：

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

这是我创建和工作的原因，但因为它删除了defualt值被擦除的节点，我希望有一种更简单的方法来创建和元素并附加在INPUT周围

<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);

Answer 1

我建议：

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。

这可以通过创建一个新元素，将其插入要包装的元素之前，然后移动元素以将包装到包装器中，而不是删除和重新创建;所以应该保留绑定到元素的任何事件和属性。

Answer 2

一个相当原始的解决方案（但很容易遵循）：

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

在空元素周围创建元素

2 个答案: