[解決済み] 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
これは、私の原始的なベンチマークよりも少し科学的で、さらに今はクラウドソーシングが可能です。
関連
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryでテーブルの行を追加する
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryを使用しない$(document).ready相当
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
親子コンポーネント通信を解決する3つのVueスロット
-
vueの補間表現とv-textディレクティブの違いについて
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
[解決済み] jQueryでdiv要素を作成する【重複】について
-
[解決済み] jQueryを使用してHTML要素を作成する最も効率的な方法は何ですか?