如何在每次迭代中添加DOM对象

How to add DOM objects in each in iteration jquery

本文关键字：添加 DOM 对象 迭代      更新时间：2023-09-26

我刚刚从最佳实践中学到，这样做要好得多

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中附加数据，但这是相当CPU密集型的，并且违背了最佳实践。

我已经尝试了几种方法来让它工作(以不同的方式转换为HTML/字符串，但没有任何工作。我要么得到[object Object]要么得到null)

您遇到的问题是您混淆了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);
});

我刚刚写了一个函数，可以用来动态生成各种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);
相关文章：