1

私は次のコードを持っています。これは、div要素とその中にあるものをほぼ作成し、それをに入れます。

function create(htmlStr) {
    var frag = document.createDocumentFragment(), temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div id="test">HELLO</div>');
document.body.insertBefore(fragment, document.body.childNodes[0]);

  1. div temp = document.createElement('div'); ただし、すでに関数に渡さ<div id="test">HELLO</div>れている場合に、なぜ別の create()関数を作成するのかについて混乱しています。div内にdivを作成するように思えます（ただし、そうではありません）。それとも、それはで抽出されtemp.firtChildますか？

  2. temp.innerHTML = htmlStr;それ以来何tempをしますdivか？

4

2 に答える 2

0

最初の質問に答えるために、基本的には、を含む親divを作成します。htmlStrこれはたまたま<div id="test">HELLO</div>です。したがって、基本的に、このコード行自体は単にdivを生成しますが、このdivは子としてtempを含むために使用されます。htmlStrしかし、あなたは正しいです。divはtemp後で単純に抽出されます。それはほとんど役に立たない。考慮すべき他のコードがないのに、なぜそこにあるのかわかりません。

質問2に関してhtmlStrは、作成されたdivの子を作成するだけです。事実上、このコードはを作成しますtemp.innerHTML == htmlStr == temp.firstChild。それはちょっと冗長です。

基本的に、コードは次のHTMLを作成します。

<div>
    <div id="test">HELLO</div>
</div>
于 2013-01-05T02:49:44.433 に答える
0

そのコードは、でラッピングdivを作成し、その内容としてcreateElementを割り当てます。しかし、その後、divが再び空になるまで、htmlStrコンテンツをそのdivから一度に1つの子で移動します。frag関数はちょうどfrag、空のdivを残して戻ります。DOMに追加されることはなく、後でガベージコレクションされます。

基本的には、ブラウザがHTML文字列を解析（および場合によっては修正）して、有効なDOMサブツリーにする方法です。

于 2013-01-05T02:52:53.323 に答える