Javascript 创建HTML元素并向其附加属性，然后将其包装到另一个元素中的最有效方法是什么？

我发现，这很好。但是，如果我还必须围绕该元素包装另一个元素，该怎么办？我现在就是这样做的：

$

（'#屏幕截图'）。追加（$（''）

这样做有更好的方法吗？
是的，使用DOM脚本：

$("#screenshots")
    .append(
        $("<a>")
            .attr({
                'href': link,
                'title': title
            })
            .append(
                $("<img>")
                    .attr({
                        'src': el,
                        'alt': '',
                        'width': '200px',
                        'height': '200px'
                    })
            )
    );

$（“屏幕截图”）
.附加(
$（”

这是一个相当多的口，但它是如此简单，你会击中自己的头，当你发现这是多么容易

我们所做的是选择
#屏幕截图
。我们使用
append（）
，在函数中我们创建一个
a
元素，使用
attr（）
设置其属性，然后再次继续使用
append（）
。在这个嵌套的
append（）
中，我们创建一个图像并设置其属性

因此，我们正在创建一个
a
元素，将其附加到
#screenshots
，创建一个
img
元素，并将其附加到先前创建的
a
元素

请注意
append（）
函数中缺少分号。jQuery声明必须没有尾随的分号，否则整个过程将无法进行。
您当前的追加方式更有效

如果希望添加多个这样的元素，一种更有效的方法是在一个位置循环并创建字符串，然后最后追加，而不是在每个循环上追加

请注意，用户界面上的每一个附加或更改都会导致浏览器重新绘制整个页面以调整更改。因此，用户界面更改延迟得越多，效率就越高

这一点，并解释了这一点

还有其他变化，如（这可以为您提供更多指导）：

检查此项

var linkElem=$（“”{
href:link，
标题：标题
});
var imgElem=$（“我同意linuxeasy，原始代码比使用“DOM脚本”的其他建议更快。下面是一个jsperf来说明差异。我还建议使用document.getElementById（）进行进一步优化

不需要jQuery

document.getElementById("screenshots").insertAdjacentHTML("beforeend", 
        '<a href="' + link + '" title="' + title + '">\n\
            <img src="' + el + '" alt="" width="200px" height="200px">\n\
        </a>'
    );

document.getElementById（“屏幕截图”）.insertAdjacentHTML（“beforeed”，
''
);
如果您真的对纯速度感兴趣，那么很难打败纯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);
}

这是使用JQuery最快的方法。有关更多详细信息和基准测试，请参阅本主题：
如果您稍微考虑一下，您可以使用与链接和附录中相同的方式创建新元素……我不知道我可以设置多个属性！我甚至在文档中都没有看到。嗯，谢谢！注意：IE中不支持这一点is确实比原始代码和当前接受的答案都更有效（“DOM脚本编写”，重复调用jQuery工厂方法）.我刚刚意识到Firefox直到Firefox 8.0才支持insertAdjacentHTML。因此，这不是一个受浏览器支持的解决方案。这种方法在FF出现之前就已经存在了。我们必须停止接受浏览器制造商的失败作为不编写好代码的借口。正如这篇文章所指出的，jQuery经常是一个拐杖er方法是在FF中填充方法，而不是避免它。谢谢，快得多。因为FF做了这些更快的更新，现在不必太在意。下面是更新的jsPerf，其中包括AutoSponge的insertAdjacentHTML测试：。它还包括另一个实际DOM脚本示例，它非常快，但可能太冗长。更有效的方法是离开完全脱离jQuery，请参阅修订版jsPerf中的“实际DOM脚本编写”：无论您做什么，如果您关心效率，请不要重复调用jQuery工厂方法。
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);
}

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);