5

次のように、documentFragment に textnodes を追加しています。

var foo = document.createDocumentFragment();
var someText = "Hello World";
foo.appendChild(document.createTextNode(someText));

これは問題なく動作しますが、次のようなインライン リンクを含む「テキスト」が渡されることがあります。

var someOtherText = "Hello <a href='www.world.com'>World</a>";

私のハンドラーでは、リンクではなくハードコードされたテキストに変換されます。

質問:
上記のような HTML 文字列を documentFragment に追加するにはどうすればよいですか? 私が使用していない場合、これを使用してtextNodes行うことができappendChildますか?

4

3 に答える 3

12

一時的な div を作成し、テキストを innerHTML に挿入してから、div のすべてのノードをフラグメントに移動します。要素は一度に 1 つの場所にしか配置できないため、一時的な div タグから自動的に削除されます。

var frag = document.createDocumentFragment();

var div = document.createElement('div');
div.innerHTML = '<a href="http://stackoverflow.com/">Stack overflow</a>';
while (div.firstChild) frag.appendChild(div.firstChild);
于 2013-11-12T13:03:15.160 に答える
5 
document.createRange().createContextualFragment("<span>Hello World!</span>");

DocumentFragment を返します。

サポート IE >= 9

編集：

最近のバージョンのSafariは短い方法で失敗するようです。ここでは少し長くなりますが、機能する方法を示します。

var range = document.createRange();
range.selectNode(document.body); // Select the body cause there is always one (documentElement fail...)

var fragment = range.createContextualFragment("<span>Hello World!</span>");
于 2015-12-15T15:07:09.150 に答える
0

これはうまくいくかもしれません：

var foo = document.createDocumentFragment();
var someText = 'Hello <a href="www.world.com">World</a>';
var item = document.createElement('span');
item.innerHTML = someText
foo.appendChild(item);
document.body.appendChild(foo);
于 2013-11-12T13:00:06.387 に答える