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

Question

I am trying to create a thumbnail view of a gallery from a JSON object using the following for loop.

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>";
            }
        }
    }

This works fine but what I have found is that any div i add only works for the current appending content and what I need is for those 4 results to be enveloped in a div so I can work with the content and style the display after it gets on the page.

I have read this: Trying to make a jquery 'for' loop that adds div elements inside another div.

and my new question is where and how do I add a second loop that only puts one set of information into a div that can then be appended to the results div in my .getElementByID

Thank you in advance for any guidance.

Answer 1

If I understand your question correctly, you don't need an additional loop.

If you want to envelop the entire thing within #results, you can open and close the div outside your for loop. Based on your comments, you also need to save the content you wish to write into a variable rather than continuously setting the innerHTML, or else the browser will try to auto-fix the unclosed HTML elements. Do it all in bulk at the end.

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

If you want to envelop each object that is returned from your JSON response, you can do it within the for loop but before and after your items.

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

Answer 2

Am I missing something here or is it not just a case of creating a new variable which starts with <div> and to this you concatenate the content to it within the for loop, instead of directly to results.innerHTML?

You obviously would then concatenate the closing <div> to it, and add your variable to the results.innerHTML.

Answer 3

Create an outer div ( outside of the loop ) -

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

Set some attributes/styles for it if needed -

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

Set the inner html of this div to your 4 other divs ( inside the loop ) -

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

Append this div instead of the 4 others -

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