Javascript 如何正确使用jqueryappend

我需要根据json文件添加新内容。一旦我在html中手动键入它，它就可以正常工作，但是一旦我想使用jQuery循环每个函数，它就不工作了。注意，我已经使用alert函数检查了循环方法，它发出了2次警报，导致json内容2对象，但append函数似乎有问题。注意，基于chrome inspect，附加功能不会在主div中心内创建div，而是创建每个div并单独放置它们。我是前端开发中的一个noob任何改进和最佳实践的建议都将不胜感激

HTML文件

<div class="wrapper">

 <div class="center"> 
         <div class="column middle"> <p id="text"></p>
             <a href="" id="link">More</a></div>
         <div class="column side">
             <img class="image" id="image" src="">
            </div>
        </div>           
</div>

javascript文件：

info = 
[
  {"details" : "this a text for examples",
   "link" : "www.google.com",
   "image" : "download.jpg"
},
{

    "details" : "this a text for",
    "link" : "www.google.com",
    "image" : "download.jpg"
}
]



$(document).ready(function(){

$.each(info, function(i,v) {
        $(".wrapper").append("<div class=\"center\">");
        $(".wrapper").append("<div class=\"column middle\"> <p id=\"text\" 
         </p>");
        $(".wrapper").append("<a href=\"\" id=\"link\">More</a></div>");
        $(".wrapper").append("<div class=\"column side\">");
        $(".wrapper").append("<img class=\"image\" id=\"image\" src=\"\">");
        $(".wrapper").append("</div>");
        $(".wrapper").append("</div>");

        document.getElementById("text").innerHTML = info[i].details;
        $("#link").attr("href",info[i].link); 
        $("#image").attr("src",info[i].image);
    });

});

info=
[
{“细节”：“这是一个示例文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
},
{
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}
]
$（文档）.ready（函数（）{
$。每个（信息、功能（i、v）{
$（“.wrapper”）。追加（“”）；
$（“.wrapper”）.append（主要问题是您试图复制无效的
id
。请记住
id
属性需要是唯一的，因此如果您确实需要
id
，可以追加索引以使其唯一

此外，您可以使用
backticks
保持代码干净，然后使用
$的第二个参数。每个
都可以获取值，而不是通过其索引进行访问


info=[{
“细节”：“这是一个示例文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
},
{
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}
]
$（文档）.ready（函数（）{
$。每个（信息、功能（i、v）{
$（“.wrapper”）.append(`
${v.details}

`);
});
})；


主要问题是您试图复制无效的
id
。请记住
id
属性需要是唯一的，因此如果确实需要
id
，可以附加索引以使其唯一

此外，您可以使用
backticks
保持代码干净，然后使用
$的第二个参数。每个
都可以获取值，而不是通过其索引进行访问


info=[{
“细节”：“这是一个示例文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
},
{
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}
]
$（文档）.ready（函数（）{
$。每个（信息、功能（i、v）{
$（“.wrapper”）.append(`
${v.details}

`);
});
})；


如果您使用的是支持ES6的浏览器，则可以使用模板文字

ES6

let info=[{
“细节”：“这是一个示例文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}, {
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}];
$(() => {
$（'.wrapper'）.append（info.map（renderContent））；
});
函数renderContent（数据）{
返回`
${data.details}
`;
}
如果您使用的是支持ES6的浏览器，则可以使用模板文字

ES6

let info=[{
“细节”：“这是一个示例文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}, {
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}];
$(() => {
$（'.wrapper'）.append（info.map（renderContent））；
});
函数renderContent（数据）{
返回`
${data.details}
`;
}
如果您没有使用与ES6兼容的浏览器，您可以为每个元素创建一个长字符串，包括适当的对象值：


let info=[{
“细节”：“这是一个示例文本”，
“链接”：“www.stackoverflow.com”，
“图像”：“profile.jpg”
},
{
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}
]
$（文档）.ready（函数（）{
$。每个（信息、功能（i、v）{
$（“.wrapper”）.append（'\
“+v.details+”
\
\
\
\
\
');
});
})；
如果您没有使用与ES6兼容的浏览器，您可以为每个元素创建一个长字符串，包括适当的对象值：


let info=[{
“细节”：“这是一个示例文本”，
“链接”：“www.stackoverflow.com”，
“图像”：“profile.jpg”
},
{
“详细信息”：“这是一个文本”，
“链接”：“www.google.com”，
“图片”：“download.jpg”
}
]
$（文档）.ready（函数（）{
$。每个（信息、功能（i、v）{
$（“.wrapper”）.append（'\
“+v.details+”
\
\
\
\
\
');
});
})；
尝试在jQuery中使用attr方法添加类
'$（“.wrapper”）.attr（'class'，'Column-side'）''
尝试在jQuery中使用attr方法添加类
'$（“.wrapper”）.attr（'class'，'Column-side'）'