Javascript 创建动态跨度

如何创建动态标记

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

$（“
它将创建

我想在您可以使用的
周围创建
标记：

$（“”）
您可以使用将一个元素包装到另一个元素中。例如：

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

$（“”）；
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

//之前：
$（“”）；/#4，创建另一个元素并将其添加到DOM中
//之后：
$('')  //#1
.appendTo（“#”+imgContainer）；/#2

这是第一种情况下的~5K ops/sec，第二种情况下的~14K ops/sec（在我相当体面的盒子上）

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

另一个需要记住的方面是，jsperf只显式地测量javascript性能。如果你在操作一个表，它的内容将更具攻击性。
-1表示忽略-1，就像@VisioN表示忽略@VisioN一样：嗯……不，-这都是关于选择正确的快捷方式和避免不必要的错误ones@VisioN: ಠ_ಠ 你试过了吗？我在上面的评论中更新了jsperf链接
//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