Question

我找到了this answer，这很棒。但是如果我还必须围绕该元素包装另一个元素呢？这就是我现在正在做的事情：

$ ('#screenshots').append($('<a href="' + link + '" title="' + title + '"><img src="' + el + '" alt="" width="200px" height="200px"></a>'));

有更好的方法吗？

Answer 1

如果你真的对纯粹的速度感兴趣，那么很难击败纯粹的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);
}

Answer 2

您当前的追加方式更有效。

一种更有效的方法，如果你想添加多个这样的元素，可以在一个地方循环和创建字符串，然后最后附加它，而不是将它附加到每个循环上。

请注意，UI上的每个附加或更改都会导致浏览器重绘整个页面以调整更改。因此，推迟UI更改的次数越多，效率就越高。

这article和this完全解释了这一点！

还有其他变体（可以为您提供更多指导）：

jQuery document.createElement equivalent?

Answer 3

我同意linuxeasy，原始代码比使用“DOM脚本”的其他建议更快。这是一个显示差异的jsperf。我还建议做一个document.getElementById（）以进一步优化。

http://jsperf.com/append-html-element-with-attributes

Answer 4

是的，使用DOM脚本：

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

Demo

非常简单，但是当你发现它是多么容易时，你就会碰到自己的头脑。

我们做的是选择#screenshots。我们使用append()，在我们创建a元素的函数中，使用attr()设置其属性，然后再次使用append()。在这个嵌套的append()中，我们创建一个图像并设置其属性。

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

请注意a函数中缺少分号。 jQuery声明必须没有尾随分号，否则整个事情都不会起作用。

Answer 5

不需要jQuery。

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

Answer 6

选中此http://jsfiddle.net/T7kAS/2/

var linkElem = $("<a/>", {
    href: link,
    title: title
});

var imgElem = $("<img/>", {
    src: el,
    width: 200,
    height: 200
}).appendTo(linkElem);

$('#screenshots').append(linkElem);

Answer 7

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 equivalent?

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

7 个答案: