0

私の研究はあまり成功したとは言えませんでした。なぜなら、例でないと説明する方法がよくわからないからです。

次の点を考慮してください。

あなたはウェブページを持っています。Web ページの 1 つの div は動的になります。つまり、テーブル、段落など、さまざまなものが読み込まれます。

div の id を「main」に設定し、便宜上これを用意しましょう。

var main = document.getElementById("main");

さて、これはトリッキーな部分です。子を変更したい場合は、2 つのオプションがあります。

1) すべての子を削除します。新しい要素ごとに JavaScript で変数を作成します。それをスタイルします。内側の html を設定します。追加します。例：

//Consider that the children have already be cleared
     var p = document.createElement("p");
        p.innerHTML = "Hello World";
        p.className = "style";
        main.appendChild(p);

    var p2 = document.createElement("p");
    p2.innerHTML = "Goodbye world!";
    p2.className = "byeStyle";
    main.appendChild(p);

2）変数の内部htmlを、基本的にはあなたが望むものに設定します。例 2:

 main.innerHTML = '<p class="style">Hello world!</p>' +
                    '<p class="byeStyle">Goodbye world!</p>';

どちらもうまくいきます。どちらが優先され、どちらがより優れたパフォーマンスを発揮しますか?

4

1 に答える 1

2

一般に、これをタイトなループで何度も実行しない限り、問題はありません。

を使用し.innerHTMLた方が高速であると認識されていますが、最新のブラウザーでは必ずしもそうとは限りません。

たとえばhttp://jsperf.com/node-creation-html-vs-dom/2を参照してください。ここでは、Chrome バージョン 28 で raw DOM アクセスを使用すると、 を使用するよりも 5 倍高速です.innerHTML。

于 2013-07-24T08:51:24.007 に答える