6

動的タグを作成するにはどうすればよいですか？ 

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png",
}).appendTo("#" + imgContainer);

作成します<img src="/images/flower.png" id="image-1" />

<span>タグの周りにタグを作成したい<img>。

すなわち<span><img src="/images/flower.png" id="image-1" /></span>

4

3 に答える 3

6

あなたが使用することができますwrap()：

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png"
}).appendTo("#" + imgContainer).wrap("<span />")
于 2012-10-29T09:18:24.227 に答える
2

wrap()ある要素を別の要素の中にラップするために使用できます。例えば：

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png",
})
.appendTo("#" + imgContainer)
.wrap("<span />");
于 2012-10-29T09:19:01.860 に答える
0

DOM操作は非常に高価です。必要なマークアップを準備し、必要に応じて追加するだけです。

//Before:
$("<img />")                   //#1, create an element outside of the tree
.attr({                        //#2? change its attributes
  id: "image-1",
  src: "/images/flower.png"
})
.appendTo("#" + imgContainer)  //#3, add the element to DOM
.wrap("<span />");             //#4, create and add another element to DOM

//After:
$('<span><img src="/images/flower.png" id="image-1"></span>')  //#1
.appendTo("#" + imgContainer);                                 //#2

これがjsperfテストケースで、前者の場合は〜5K ops / sec、後者の場合は〜14Kになります（私のかなりまともなボックスで）。

これも時期尚早の最適化ではありません。たとえば、ajaxが入力された7x10テーブルがあり、すべてのセルを個別に作成し、それらを<tr>要素にラップしてからテーブルに追加すると、オーバーヘッドが増加します。文字列を操作すると、スクリプトは少なくとも80倍高速になります。

覚えておくべきもう1つの側面は、jsperfがJavaScriptのパフォーマンスのみを明示的に測定することです。テーブルを操作している場合、そのコンテンツはさらに積極的に再ペイント/リフライされます。

于 2012-10-30T08:03:13.227 に答える