如何在迭代jquery中的每個對象中添加DOM對象

Question

我剛剛從最佳實踐中學到，做這樣的事情要好得多

var check_icon = $('<i />', {class: 'check icon'});

代替這個

var check_icon = '<i class="check icon"></i>

我需要做的是創建這些列表，因此我將每個數據都用於我的數據以及在每個數據前面使用check_icon。 像這樣：

var all = '';
$.each(json, function(id, val) {
    all += checkicon + val;
});
$('#output').html(all);

我的問題是它不起作用。 它沒有給我HTML代碼，而是返回：

[object Object]Carl[object Object]John

我知道我可以將數據附加到$.each但這會$.each大量CPU並違反最佳實踐。

我嘗試了幾種使其工作的方法（以不同方式轉換為HTML /字符串，但是沒有任何效果。我要么獲得[object Object]要么為null）

Answer 1

您遇到的問題是您將jQuery對象與HTML字符串混淆了。 很難說出您要做什么，但是我認為這可能對您有用。

var output = $("#output");
$.each(json, function(id, val) {
    var check_icon = $("<i>").addClass("check icon");
    check_icon.html(val);
    output.append(check_icon);
});

Answer 2

我剛剛編寫了可用於動態制作各種DOM元素的函數

function makeElement(element, options) {
    var $element = document.createElement(element);
    $.each(options, function (key, value) {
            $element.setAttribute(key, value);

    });
    return $element;
}

並且您可以根據需要隨時調用它。

var checkIcon = makeElement('i', {class: 'check icon'});
$('parent-container').appendChild(checkIcon);