javascript - 创建动态跨度

Question

如何创建动态标签？

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

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

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

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

Answer 1

您可以使用wrap()：

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

Answer 2

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

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

Answer 3

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 倍！

要记住的另一个方面是 jsperf 仅显式测量 javascript 性能。如果您正在操作表格，则其内容将更加激进地重新绘制/重新飞行。