带.appendchild（）的循环Javascript正在html dom中从[object object]追加最后一个对象的值

请任何人解释我哪里做错了。我想在数据中显示这两个对象，但它只显示最后一个对象值，尽管它正在适当地运行迭代

---

此图显示my console.log数据

而不是

a.id

使用

a.className

对于动态创建的元素，请参见此处的FIDLE

您还需要附加到唯一数据，因此元素将是

a.className=“refdetails”+数据[x].id和追加看起来像
$（'.refdetails'+data[x].id）.attr（“href”，url）

发生此问题的原因是您试图将数据插入到ID中，而这只适用于DOM中找到的第一个ID，因为它是unqiue

Jquery：

$(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: '/Store/browseajax',
        type: 'GET',
        data: { id: '@ViewBag.genreid' },
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    console.log(li);
                    let a = document.createElement("a");
                    a.id = "refdetails";
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.id = "image";

                    let span = document.createElement("span");
                    span.id = "title";

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = '@Url.Action("Details", "Store")?id=' + data[x].albumid;

                    $('#refdetails').attr("href", url);
                    $('#image').attr("src", data[x].albumarturl);
                    $('#image').attr("alt", data[x].albumtitle);
                    $('#title').text(data[x].albumtitle);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

对于动态创建的元素，不要使用
a.id
而使用
a.className
，请参见此处的fiddle

您还需要附加到唯一数据，因此元素将是
a.className=“refdetails”+数据[x].id和追加看起来像
$（'.refdetails'+data[x].id）.attr（“href”，url）

发生此问题的原因是您试图将数据插入到ID中，而这只适用于DOM中找到的第一个ID，因为它是unqiue

Jquery：

$(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: '/Store/browseajax',
        type: 'GET',
        data: { id: '@ViewBag.genreid' },
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    console.log(li);
                    let a = document.createElement("a");
                    a.id = "refdetails";
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.id = "image";

                    let span = document.createElement("span");
                    span.id = "title";

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = '@Url.Action("Details", "Store")?id=' + data[x].albumid;

                    $('#refdetails').attr("href", url);
                    $('#image').attr("src", data[x].albumarturl);
                    $('#image').attr("alt", data[x].albumtitle);
                    $('#title').text(data[x].albumtitle);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

大家好，欢迎来到SO

让我试着通过你的代码给出一些见解

在这里，您将创建新的DOM元素：

    $(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/albums',
        type: 'GET',
        /* data: { id: '@ViewBag.genreid' }, */
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    /* console.log(li) */;
                    let a = document.createElement("a");
                    a.className = "refdetails" + data[x].id;
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.className = "image" + data[x].id;

                    let span = document.createElement("span");
                    span.className = "title" + data[x].id;

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = 'http://yourwebsite.com/?id=' + data[x].id;

                    $('.refdetails'+ data[x].id).attr("href", url);
                    $('.image' + data[x].id).attr("src", 'https://via.placeholder.com/150');
                    $('.image' + data[x].id).attr("alt", data[x].title);
                    $('.title' + data[x].id).text(data[x].title);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

img.id = "image";

let span = document.createElement("span");
span.id = "title";

a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
albumlist.appendChild(li);

现在，请注意以下几行。您将为元素分配唯一的id，在本例中为“图像””和“标题””

然后，尝试将一些值分配给这些元素：

    $(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/albums',
        type: 'GET',
        /* data: { id: '@ViewBag.genreid' }, */
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    /* console.log(li) */;
                    let a = document.createElement("a");
                    a.className = "refdetails" + data[x].id;
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.className = "image" + data[x].id;

                    let span = document.createElement("span");
                    span.className = "title" + data[x].id;

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = 'http://yourwebsite.com/?id=' + data[x].id;

                    $('.refdetails'+ data[x].id).attr("href", url);
                    $('.image' + data[x].id).attr("src", 'https://via.placeholder.com/150');
                    $('.image' + data[x].id).attr("alt", data[x].title);
                    $('.title' + data[x].id).text(data[x].title);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

img.id = "image";

let span = document.createElement("span");
span.id = "title";

a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
albumlist.appendChild(li);

您试图在每个循环中将完全相同的元素（
#image
和
#title
）附加到dom中元素应具有唯一的id，因此如果尝试插入具有相同id的新节点，则在插入新节点之前将删除上一个节点

如果要查看DOM中的所有唱片集标题，应在每个循环中将新元素附加到DOM中

你可以利用这个想法：

$('#refdetails').attr("href", url);
$('#image').attr("src", data[x].albumarturl);
$('#image').attr("alt", data[x].albumtitle);
$('#title').text(data[x].albumtitle);

for（设i=0；i
大家好，欢迎来到SO

让我试着通过你的代码给出一些见解

在这里，您将创建新的DOM元素：

    $(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/albums',
        type: 'GET',
        /* data: { id: '@ViewBag.genreid' }, */
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    /* console.log(li) */;
                    let a = document.createElement("a");
                    a.className = "refdetails" + data[x].id;
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.className = "image" + data[x].id;

                    let span = document.createElement("span");
                    span.className = "title" + data[x].id;

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = 'http://yourwebsite.com/?id=' + data[x].id;

                    $('.refdetails'+ data[x].id).attr("href", url);
                    $('.image' + data[x].id).attr("src", 'https://via.placeholder.com/150');
                    $('.image' + data[x].id).attr("alt", data[x].title);
                    $('.title' + data[x].id).text(data[x].title);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

img.id = "image";

let span = document.createElement("span");
span.id = "title";

a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
albumlist.appendChild(li);

现在，请注意以下几行。您为元素分配了一个唯一的id，在本例中为“image”和“title”

然后，尝试将一些值分配给这些元素：

    $(document).ready(function () {
    GetDetails();
});

function GetDetails() {
    let albumlist = document.getElementById("album-list");



    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/albums',
        type: 'GET',
        /* data: { id: '@ViewBag.genreid' }, */
        contentType: 'application/json;charset=utf-8',
        success: function (data) {

            console.log(data);


            for (x in data) {

                    let li = document.createElement("li");
                    /* console.log(li) */;
                    let a = document.createElement("a");
                    a.className = "refdetails" + data[x].id;
                    a.href = "";


                    let img = document.createElement("img");
                    img.alt = "";
                    img.src = "";
                    img.className = "image" + data[x].id;

                    let span = document.createElement("span");
                    span.className = "title" + data[x].id;

                    a.appendChild(img);
                    a.appendChild(span);
                    li.appendChild(a);
                    albumlist.appendChild(li);

                    let url = 'http://yourwebsite.com/?id=' + data[x].id;

                    $('.refdetails'+ data[x].id).attr("href", url);
                    $('.image' + data[x].id).attr("src", 'https://via.placeholder.com/150');
                    $('.image' + data[x].id).attr("alt", data[x].title);
                    $('.title' + data[x].id).text(data[x].title);                   
            }
        },
        error: function (err) {
            alert(err.statusText);
        }
    });


}

img.id = "image";

let span = document.createElement("span");
span.id = "title";

a.appendChild(img);
a.appendChild(span);
li.appendChild(a);
albumlist.appendChild(li);

您正试图在每个循环中将完全相同的元素（
#image
和
#title
）附加到dom中。元素应具有唯一的id，因此如果您尝试插入具有相同id的新节点，则在插入新节点之前将删除上一个节点

如果要查看DOM中的所有唱片集标题，应在每个循环中将新元素附加到DOM中

你可以利用这个想法：

$('#refdetails').attr("href", url);
$('#image').attr("src", data[x].albumarturl);
$('#image').attr("alt", data[x].albumtitle);
$('#title').text(data[x].albumtitle);

for（设i=0；i
使用类而不是id。id必须是唯一的。当jQuery在
$（“#refdetails”）
中查找id时，它只检索第一个id。不是所有的…使用类。使用类而不是id。id必须是唯一的。当jQuery在
$（“#refdetails”）中查找id时
，它仅检索第一个元素。并非所有…使用类。
$（'.refdetails'）
此选择器将指向列表的所有元素（包括以前由循环呈现的）。最后一个元素覆盖到所有元素：（感谢@Sachink完全忽略了这一点。我已将其更新为从json传递唯一ID。
$（'.refdetails'））
此选择器将指向列表中的所有元素（包括之前由循环呈现的元素）。最后一个元素覆盖为所有：（感谢@Sachink完全忽略了这一点。我已将其更新为从json传递唯一ID。