2

次の文字列を DOM 構造に変換したいと思います。

text node <div>div node</div>text node<p>paraph node</p> text node

1つのアプローチは、

mydiv = document.createElement('div');
mydiv.innerHTML = 'text node <div>div node</div>text node<p>paraph node</p> text node';

このアプローチでは、DOM 構造は別の div でラップされますが、これは望ましくありません。

検索と読み取りを行った後、ノードに a を追加すると、追加ではなく単に追加さdocument.createDocumentFragment()れるため、これが最良の方法であることがわかりましたfragmentfragment's childNodesfragment itself

残念ながら、innerHTMLメソッドは では利用できませんfragment。

私は何をすべきか？ありがとう

4

4 に答える 4

8

これを試して：

var frag = document.createDocumentFragment();
var mydiv = document.createElement('div');
mydiv.innerHTML = 'text node <div>div node</div>text node<p>paraph node</p> text node';


while( mydiv.firstChild ) {
    frag.appendChild( mydiv.firstChild );
}

document.body.appendChild( frag );
于 2012-04-22T18:57:03.413 に答える
4

このページのすべての解決策を試しましたが、私のケース (より複雑な HTML 文字列) に対して十分に機能するものはありませんでした。ここで見つけたinsertAdjacentHTMLを使用したこの非常に単純なアプローチの使用を終了しました: https://stackoverflow.com/a/7327125/388412

div.insertAdjacentHTML( 'beforeend', str );
于 2012-07-07T10:30:45.093 に答える
1

Esailijaの答えは、クロスブラウザーでほとんどの状況で機能し、今のところ、私が一般的に好むものです。正確にこのタスクのために設計された別のオプションは、のcreateContextualFragment()方法ですRange（DOM解析とシリアル化の仕様も参照してください）。アイデアはDocumentFragment、範囲の先頭で表されるドキュメント内の場所に関連する、指定されたHTML文字列のを作成することです。残念ながら、このメソッドはIE <= 9ではサポートされていませんが、IE10ではサポートされます。

これが例です。本文の最後にフラグメントを挿入することを計画していると仮定しましょう。

var html = "text node <div>div node</div>text node<p>paraph node</p> text node";
var range = document.createRange();
range.selectNodeContents(document.body);
range.collapse(false);
var frag = range.createContextualFragment(html);

document.body.appendChild( frag );
于 2012-04-22T22:26:06.763 に答える
0

さて、便宜上、ティムの答えとエサイリヤの答えを1つの関数に組み合わせただけです。

   function createDocumentFragment (inMarkup) {

        var range, fragment, dummy, elem;

        if (document.createRange && (range = document.createRange())
                && range.selectNodeContents
                && range.createContextualFragment) {

            range.collapse(false);

            range.selectNodeContents(document.body);

            fragment = range.createContextualFragment(inMarkup);

        } else {

            dummy = document.createElement('div');

            fragment = document.createDocumentFragment();

            dummy.innerHTML = inMarkup;

            while((elem = dummy.firstChild)) {

                fragment.appendChild(elem);

            }

        }

        return fragment;

    }
于 2012-04-23T08:18:15.817 に答える