1. ホーム
  2. javascript

[解決済み] jQueryのdocument.createElementと同等?

2022-03-15 09:48:48

質問

古いJavaScriptのコードをリファクタリングしているのですが、DOM操作が多くなっています。

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";
this.OuterDiv = odv;

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";
odv.appendChild(t);

jQueryを使ったもっと良い方法があれば教えていただきたいです。と実験してみました。

var odv = $.create("div");
$.append(odv);
// And many more

でも、これで良いのかどうか。

どのように解決するのですか?

以下は、quot;one"行のあなたの例です。

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;


更新情報 : この記事は今でも結構なアクセスがあるので、更新しておこうと思いました。下のコメント欄で、以下のような議論がありました。 $("<div>")$("<div></div>")$(document.createElement('div')) 新しい要素を作成する方法として、どちらが"best"であるかということです。

をまとめてみました 小さなベンチマーク で、上記のオプションを10万回繰り返した結果が大体こんな感じです。

jQuery 1.4, 1.5, 1.6

               Chrome 11  Firefox 4   IE9
<div>            440ms      640ms    460ms
<div></div>      420ms      650ms    480ms
createElement    100ms      180ms    300ms

jQuery 1.3

                Chrome 11
<div>             770ms
<div></div>      3800ms
createElement     100ms

jQuery 1.2

                Chrome 11
<div>            3500ms
<div></div>      3500ms
createElement     100ms

当たり前といえば当たり前なのですが document.createElement が最速の方法です。もちろん、コードベース全体のリファクタリングを始める前に、ここで話している違いは(古風なバージョンのjQueryを除いて)約3ミリ秒の追加に相当することを思い出してください。 1000要素あたり .


アップデート2

更新内容 jQuery 1.7.2 にベンチマークを設置し JSBen.ch これは、私の原始的なベンチマークよりも少し科学的で、さらに今はクラウドソーシングが可能です。

http://jsben.ch/#/ARUtz