Question

如何创建动态代码？

$("<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>

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

这是a jsperf test case，第一个案例的结果为~5K ops / sec，后者为〜14K（在我相当不错的盒子上）。

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

要记住的另一个方面是jsperf仅显式地测量javascript性能。如果您正在操纵表格，其内容将更加积极re-painted/re-flown。

创建动态范围

3 个答案: