私はいくつかの古い 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
しかし、これがより良いかどうかはわかりません。
「1」行の例を次に示します。
this.$OuterDiv = $('<div></div>')
.hide()
.append($('<table></table>')
.attr({ cellSpacing : 0 })
.addClass("text")
)
;
更新: この投稿はまだかなりの量のトラフィックを獲得しているため、更新しようと思いました。以下のコメントでは、新しい要素を作成する方法としての$("<div>")vs $("<div></div>")vsについてのいくつかの議論があり、どちらが「最適」です。$(document.createElement('div'))
私は小さなベンチマークをまとめました。これは、上記のオプションを 100,000 回繰り返した結果を大まかに示したものです。
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
jQuery1.3
Chrome 11
<div> 770ms
<div></div> 3800ms
createElement 100ms
jQuery1.2
Chrome 11
<div> 3500ms
<div></div> 3500ms
createElement 100ms
それは大きな驚きではないと思いますdocument.createElementが、最速の方法です。もちろん、コードベース全体のリファクタリングを開始する前に、ここで話している違い (古いバージョンの jQuery を除くすべて) は、1,000 要素あたり約 3 ミリ秒の追加に等しいことを思い出してください。
更新 2
jQuery 1.7.2用に更新され、JSBen.ch私の原始的なベンチマークよりもおそらくもう少し科学的なベンチマークが追加されました。さらに、クラウドソーシングが可能になりました!
jQuery コンストラクターに追加したい要素の HTML を提供するだけで、新しく構築された HTML から jQuery オブジェクトが返されます。これは、jQuery のメソッド$()を使用して DOM に追加するのに適しています。append()
例えば：
var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);
必要に応じて、プログラムでこのテーブルにデータを入力できます。
これにより、クラス名やその他の属性を含む、好きな任意の HTML を指定することができます。これは、JS などのcreateElement属性を使用して設定するよりも簡潔です。cellSpacingclassName
jQuery()新しい DOM 要素の作成は、メソッドのコア機能です。以下を参照してください。
私はそのようにやっています：
$('<div/>',{
text: 'Div text',
class: 'className'
}).appendTo('#parentDiv');
であるためjQuery1.8、 を使用$.parseHTML()して要素を作成する方が適切です。
2 つの利点があります。
1. のような古い方法を使用する場合$(string)、jQuery は文字列を調べて、html タグを選択するか、新しい要素を作成するかを確認します。を使用$.parseHTML()することで、新しい要素を明示的に作成することを jQuery に伝えるため、パフォーマンスが少し向上する可能性があります。
2.さらに重要なことは、古い方法を使用すると、クロスサイト攻撃 (詳細)に苦しむ可能性があることです。次のようなものがある場合：
var userInput = window.prompt("please enter selector");
$(userInput).hide();
悪者が<script src="xss-attach.js"></script>あなたをからかうために入力する可能性があります。幸いなことに、$.parseHTML()この恥ずかしさは避けてください。
var a = $('<div>')
// a is [<div></div>]
var b = $.parseHTML('<div>')
// b is [<div></div>]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src="xss-attach.js"></script>]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []
aただし、は jQuery オブジェクトでbあり、 は html 要素であることに注意してください。
a.html('123')
// [<div>123</div>]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>123</div>]
アップデート
jQuery の最新バージョンでは、次のメソッドは 2 番目のオブジェクトで渡されたプロパティを割り当てません。
前の回答
document.createElement('div')と一緒に使用するjQuery方が速いと思います：
$(document.createElement('div'), {
text: 'Div text',
'class': 'className'
}).appendTo('#parentDiv');
var mydiv = $('<div />') // also works
var div = $('<div/>');
div.append('Hello World!');
jQueryでDIV要素を作成するための最短/最も簡単な方法です。
それはすべて非常に簡単です！ここにいくつかの簡単な例があります...
var $example = $( XMLDocRoot );
var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root
$element.attr({
id: '1',
hello: 'world'
});
var $example.find('parent > child').append( $element );
すぐに使えるjQueryには、createElementに相当するものはありません。実際、jQuery の作業の大部分は、純粋な DOM 操作よりも innerHTML を使用して内部的に行われます。Adam が上で述べたように、これは同様の結果を達成する方法です。
ほんの数例を挙げると、 appendDOM 、 DOMEC、FlyDOMなどの innerHTML で DOM を利用するプラグインも利用できます。パフォーマンスに関しては、ネイティブjqueryが依然として最もパフォーマンスが高いです（主にinnerHTMLを使用しているため）