2

新しい要素を作成し、IMGなどの空の要素の周りに追加するソリューションを取得しようとしています。INPUTの場合、IMGまたはINPUTの周りに親要素を簡単に追加できますが、DOMのみを介して追加します。これまでのところ、これを実行できる唯一の方法は、cloneNodeを使用して、新しく作成された要素に追加することです。

例すでに存在するIMGの周りにDOMを介してDIVを追加します

前：

<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);
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 に答える