19

要素のすべてのコンテンツをドキュメントフラグメントに置き換えようとしています:

var frag = document.createDocumentFragment()

ドキュメントフラグメントは問題なく作成されています。問題ありません。そこに要素を追加しても問題ありません。を使用して追加できますelement.appendChild(frag)。それもうまくいきます。

jQuery の HTML に似た「置換」メソッドを作成しようとしています。古いブラウザとの互換性については心配していません。要素のすべてのコンテンツを置き換える魔法の関数はありますか?

私は試しました（私が見つけることができるすべてelement.innerHTML = frag.cloneNode(true)の「要素コンテンツの置換」ウィキに従って）、それは機能しません。それは私に与えます。<div>[object DocumentFragment]</div>

ライブラリはありません。jQuery ソリューションもありません。

わかりやすくするために、「魔法の」ソリューションを探しています。既存のすべての要素を一度に1つずつ削除してから、フラグメントを追加する方法を知っています。

4

3 に答える 3

24

やってみましたreplaceChild

このようなもの

element.parentNode.replaceChild(frag, element)

ソース: https://developer.mozilla.org/en-US/docs/DOM/Node.replaceChild

元の jsFiddle: http://jsfiddle.net/tomprogramming/RxFZA/

編集:ああ、内容の置換が表示されませんでした。まず、それらを削除してください。

element.innerHTML = "";
element.appendChild(frag);

jsfiddle: http://jsfiddle.net/tomprogramming/RxFZA/1/

jsfiddle では、jquery のみを使用してボタンを接続していることに注意してください。クリック ハンドラー全体は生の JavaScript です。

Edit2: これも pimvdb によって提案されていますが、新しいものを切り離された要素に追加して置き換えるだけです。

var newElement = element.cloneNode();
newElement.innerHTML = "";
newElement.appendChild(frag);
element.parentNode.replaceChild(newElement, element);

http://jsfiddle.net/tomprogramming/RxFZA/3/

于 2012-11-09T15:23:01.767 に答える
6

2017:
ContentEditable フィールドからこの Magic answer を試して、Range

var range = document.createRange(); // create range selection 
range.selectNodeContents($element); // select all content of the node
range.deleteContents() // maybe there is replace command but i'm not find it
range.insertNode(frag)
于 2017-08-15T11:24:41.810 に答える
1

EDIT (cause my original answer was just plain dumb):

var rep = document.createElement("div");
rep.appendChild(frag);
element.innerHTML = rep.innerHTML;
于 2012-11-09T15:45:29.417 に答える