2

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

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

前：

<input type="text" />

后：

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

这是我创建和工作的，但是因为它删除了节点，所以默认值被擦除了我希望有一种更简单的方法来创建和元素并在 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);
4

2 回答 2

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 小提琴演示。

并且似乎保留了 event-binding。

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

于 2013-02-10T17:56:36.727 回答
1

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

var elem = document.getElementById('test');
elem.outerHTML = '<ul><li>' + elem.outerHTML + '</li></ul>';
于 2013-02-10T18:02:25.933 回答