javascript - 使用for循环在HTML div中显示JSON内容

Question

我正在尝试将 JSON 的内容显示到 div 类“network-info”中。我相信首先写入的内容会被数组中接下来的内容覆盖。我可以用什么来规避这个问题并显示一切？

    $(function() {

        var netinfo = function(data) {
            for (var i = 0; i < data.length; i++) {
                $(".network-info").html(
                    "<hr>" +
                    "<p> Adapter Name: " + data[i].name + "</p>" +
                    "<p> IP Address:  " + data[i].ip + "</p>" +
                    "<p> MAC Address:  " + data[i].mac + "</p>" +
                    "<p> Adapter ID:  " + data[i].id + "</p>" +
                    "<hr>"
                )
            }
        };

        $.ajax({
            url: "http://127.0.0.1:8080/dashboard?context=netadapters&node=5",
            dataType: 'json',
            crossDomain: true,
        }).done(function(data) {
            netinfo(data);
        });

    });

Answer 1

不要将输出直接写入 HTML，而是构建一个字符串，然后注入(inject)该字符串，如下所示:

    var netinfo = function(data) {
        var output = "";
        for (var i = 0; i < data.length; i++) {
            output +=
                "<hr>" +
                "<p> Adapter Name: " + data[i].name + "</p>" +
                "<p> IP Address:  " + data[i].ip + "</p>" +
                "<p> MAC Address:  " + data[i].mac + "</p>" +
                "<p> Adapter ID:  " + data[i].id + "</p>" +
                "<hr>";
        }
        $(".network-info").html(output);
    };

这实际上比附加数据更好，因为它只修改 DOM 一次。