尝试使用for循环jquery中的inner.HTML生成div

Question

我正在尝试使用以下for循环从JSON对象创建库的缩略图视图。

function GalleryContent(url){

    var hr = new XMLHttpRequest();
    var results= document.getElementById("results");
    hr.open("POST",url);    
    hr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var data= $.parseJSON(hr.responseText);
            var results = document.getElementById("results");
            results.innerHTML = "";
            for (var obj in data){
                 results.innerHTML += "<div class='artwork'><img src='"+data[obj].filePath+data[obj].fileName+ "' alt='"+data[obj].Num+data[obj].title+"' width='150' height='auto'></div>";
                results.innerHTML += "<div class='Num'>Num:"+data[obj].Num+ "</div>";
                 results.innerHTML += "<div class='Title'>Title:"+data[obj].title+ "</div>";
                results.innerHTML += "<div class='Price'>Price:<span class='numbers'>"+data[obj].Price+ "</span></div>";
            }
        }
    }

这工作正常，但我发现任何我添加的div仅适用于当前附加内容，我需要的是将这4个结果封装在div中，这样我就可以使用内容并在显示后设置样式在页面上。

我已经读过： 尝试创建一个jquery'for'循环，在另一个div中添加div元素。

我的新问题是在哪里以及如何添加第二个循环，它只将一组信息放入div中，然后可以将其附加到我的.getElementByID中的结果div

提前感谢您的任何指导。

Answer 1

如果我正确理解您的问题，您不需要额外的循环。

如果你想在#results中包含整个事物，你可以打开和关闭你的for循环之外的div。 根据您的注释，您还需要将要写入的内容保存到变量中，而不是连续设置innerHTML，否则浏览器将尝试自动修复未关闭的HTML元素。 最后完成这一切。

content = "";
content += "<div id='container'>";
for (var obj in data) {
    ...
}
content += "</div>";
results.innerHTML = content;

如果要包围从JSON响应返回的每个对象，可以在for循环中但在项目之前和之后进行。

content = "";
for (var obj in data) {
    content += "<div class='gallery-container'>";
    ...
    content += "</div>";
}
content += "</div>";
results.innerHTML = content;

Answer 2

我是否在这里遗漏了一些东西，或者它不只是创建一个以<div>开头的新变量，并且在for循环中将内容连接到它，而不是直接连接到results.innerHTML？

您显然会将结束<div>到它，并将您的变量添加到results.innerHTML。

Answer 3

创建一个外部div（ 循环外部 ） -

var outerDiv = document.createElement('div');

如果需要，为它设置一些属性/样式 -

outerDiv.setAttribute('class', 'outerDiv');
outerDiv.style.backgroundColor = 'white'; 

将此div的内部html设置为其他4个div（ 在循环内 ） -

outerDiv.innerHTML = // YOUR FIRST DIV
outerDiv.innerHTML += // YOUR SECOND DIV
// ... etc

添加此div而不是其他4个 -

var results = document.getElementById("results");
    results.appendChild(outerDiv);