创建HTML元素并将属性附加到它然后将其包装在另一个元素中的最有效方法是什么？
我找到了这个答案 ，这很棒。 但是如果我还必须在该元素周围包裹另一个元素呢？ 这就是我现在这样做的方式：
$ ('#screenshots').append($(' '));
有没有更好的方法这样做？
jQuery不需要。
document.getElementById("screenshots").insertAdjacentHTML("beforeend", '\n\ 
\n\ ' );
如果你真的对纯速度感兴趣，那么很难击败纯DOM方法：
var div = document.getElementById("screenshots"), anchor, img; if (div) { anchor = document.createElement("A");; anchor.href = link; anchor.title = title; img = document.createElement("IMG"); img.src = el; img.alt = ""; img.width = 200; img.height = 200; anchor.appendChild(img); div.appendChild(anchor); }
您当前的追加方式更有效。
一种更有效的方法，如果你想添加多个这样的元素，就可以在一个地方循环和创建字符串，然后最后附加它，而不是在每个循环上附加它。
请注意，UI上的每个附加或更改都会导致浏览器重绘整个页面以调整更改。 因此，您推迟UI更改的次数越多，效率就越高。
这篇文章和这解释了这一点!!
还有其他变体（可以指导您更多）：
jQuery document.createElement等价？
我同意linuxeasy，原始代码比使用“DOM脚本”的其他建议更快。 这是一个显示差异的jsperf。 我还建议做一个document.getElementById（）以进一步优化。
是的，使用DOM脚本：
$("#screenshots") .append( $("") .attr({ 'href': link, 'title': title }) .append( $("![]()
") .attr({ 'src': el, 'alt': '', 'width': '200px', 'height': '200px' }) ) );
演示 。
这是非常令人满口的，但它很简单，当你发现它是多么容易时，你会碰到自己的头。
我们做的是选择#screenshots 。 我们使用append() ，并在函数中创建a元素，使用attr()设置其属性，然后再次使用append() 。 在这个嵌套的append() ，我们创建一个图像并设置其属性。
因此，我们正在创建a元素，将其附加到#screenshots ，创建一个img元素，并将其附加到先前创建a元素。
请注意append()函数中缺少分号。 jQuery声明必须没有尾随的分号，否则整个事情都不会起作用。
检查这个http://jsfiddle.net/T7kAS/2/
var linkElem = $("", { href: link, title: title }); var imgElem = $("![]()
", { src: el, width: 200, height: 200 }).appendTo(linkElem); $('#screenshots').append(linkElem);
var div = $("#screenshots"), anchor, img; anchor = $(document.createElement("A")); anchor.attr("href", "link"); anchor.attr("title", "title"); img = $(document.createElement("IMG")); img.attr("src", el); img.attr("alt", ""); img.attr("width", "200"); img.attr("height", "200"); anchor.append(img); div.append(anchor);
这是使用JQuery的最快方法。 有关更多详细信息和基准测试，请参阅此主题： jQuery document.createElement等效？