创建动态跨度

Question

如何创建动态标签？

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

它将创建<img src="/images/flower.png" id="image-1" />

我想在<img> 标签周围创建<span> 标签。

即<span><img src="/images/flower.png" id="image-1" /></span>

Answer 1

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

这里是a jsperf test case，第一种情况下约为 5K ops/sec，后一种情况下约为 14K（在我相当不错的盒子上）。

这也不是过早的优化。例如，如果您有 ajax 填充的 7x10 表格，并且您单独创建每个单元格......并将它们包装到 <tr> 元素中......然后将其添加到表格中，开销就会增加。对字符串进行操作，您的脚本将至少快 80 倍！

要记住的另一个方面是 jsperf 仅显式测量 javascript 性能。如果你在操作一个表格，它的内容会更加激进re-painted/re-flown。

Answer 2

您可以使用wrap() 将一个元素包裹在另一个元素中。例如：

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

Answer 3

你可以使用wrap():

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