創建 HTML 元素並為其附加屬性然后將其包裝在另一個元素中的最有效方法是什么？

Question

我找到了這個答案，太好了。 但是如果我還必須在該元素周圍包裹另一個元素怎么辦？ 這就是我現在的做法：

$ ('#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 更改，它的效率就會越高。

這篇 文章和這篇文章准確地解釋了這一點！！

還有其他變體，例如（可以為您提供更多指導）：

jQuery document.createElement 等效？

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

演示。

這很拗口，但它是如此簡單，當你發現它是多么容易時，你會打自己的頭。

我們所做的是選擇#screenshots 。 我們使用append() ，並在函數中創建一個a元素，使用attr()設置其屬性，然后再次繼續使用append() 。 在這個嵌套的append()中，我們創建一個圖像並設置它的屬性。

因此，我們正在創建一個a元素，將其附加到#screenshots ，創建一個img元素，並將其附加到之前創建a元素中。

請注意append()函數中缺少分號。 重要的是 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

一次創建多個元素的最有效方法是使用字符串在元素上設置innerHTML屬性，因為我們將刪除元素的創建到瀏覽器：

const el = document.createElement('div');

el.innerHTML = `
<h1>Page Title</h1>
<p>Lorem, ipsum dolor.</p>
<input value="Lorem ipsum dolor sit amet." >
<button id="btn">Click Me</button>
`;

el.addEventListener('click', () => {
  // Use target object to interact with the element
  console.log(event.target);
});

const root = document.querySelector('#app');
root.appendChild(el);

Answer 7

檢查這個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 8

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 等價物？