javascript - Append for loop to div in html -

so i'm trying learn javascript , think have working json script loop grab data i'm having trouble figuring out how append data div. after figure out i'm going redo in jquery (because i'm trying learn well).

let's div id #wrapper

for (var = 0; < providerlisting.length; i++) { document.write('<div class="entry panel row"> \     <div class="large-4 columns first"> \             <div class="name">' + providerlisting[i].nametitle + '</div> \             <div class="specialty">' + providerlisting[i].caretype + '</div> \             <div class="peferred">' + providerlisting[i].preferredprovider + '</div> \         </div> \         <div class="large-3 columns second"> \             <div class="address">' + providerlisting[i].address1 + '<br /> \             ' + providerlisting[i].address2 + '<br /> \             ' + providerlisting[i].citystatezip + ' \             </div> \         </div> \         <div class="large-3 columns third"> \             <img src="' + providerlisting[i].coverage + '" alt="example"> \         </div> \         <div class="large-2 columns fourth"> \             <div class="status">' + providerlisting.status + '</div> \             <a data-dropdown="actionsmenu2" class="actions button small secondary round dropdown" href="#">actions</a><br> \             <ul id="actionsmenu2" data-dropdown-content="" class="f-dropdown"> \                 <li><a href="' + providerlisting[i].psn + '">generate psn</a></li> \                 <li><a href="' + providerlisting[i].dcontact + '">download contact</a></li> \                 <li><a href="' + providerlisting[i].save + '">save provider list</a></li> \                 <li><a href="' + providerlisting[i].rating + '">view healthgrades rating</a></li> \             </ul> \         </div> \     </div>  \ ')}; 

don't use document.write, that's direct output (where ever <script> may lie). and, without getting in dom objects, you're going need append .innerhtml. e.g.

var wrapper = document.getelementbyid('wrapper');  (...){   /*document.write(*/   wrapper.innerhtml +=     '<div ...'   ;   /*);*/ } 

now, could start using dom elements instead. example:

var wrapper = document.getelementbyid('wrapper');  (...){   // create outer div (with classes 'entry panel row'):   var entry_panel_row = document.createelement('div');    // add class names:   entry_panel_row.classname = 'entry panel row';    // instead of document.write, add html new element...   entry_panel_row.innerhtml += '<div class="large-4 ...</div>';    // append element (as whole) wrapper   wrapper.appendchild(entry_panel_row); } 

going further, instead of using strings, can create elements 1 one appending them each parent. then, once you've compiled entire dom element in entry_panel_row can proceed wrapper.appendchild(entry_panel_row).

---

jquery (a little) easier el = document.createelement , parent.appendchild(el) on , over, , nomenclature takes bit getting used to, here's had. figure translate can see jquery (you had mentioned learning it):

for (var = 0; < providerlisting.length; i++){   var pl = providerlisting[i]; // shorthand reference    // begin building dom element   $('<div>')     .addclass('entry panel row') // css classes     .append( // children       $('<div>').addclass('large-4 columns first').append(         $('<div>').addclass('name').text(pl.nametitle),         $('<div>').addclass('specialty').text(pl.caretype),         $('<div>').addclass('preferred').text(pl.preferredprovider)       ),       $('<div>').addclass('large-3 columns second').append(         $('<div>').addclass('address').html(pl.address1 + '<br />' + pl.address2 + '<br />' + pl.citystatezip)       ),       $('<div>').addclass('large-3 columns third').append(         $('<img>').attr({'src':pl.coverage,'alt':'example'})       ),       $('<div>').addclass('large-2 columns fourth').append(         $('<div>').addclass('status').text(pl.status),         $('<a>').addclass('actions button small secondary round dropdown').prop('href','#').data('dropdown','actionsmenu2').text('actions'),         '<br />',         $('<ul>').prop('id','actionsmenu2').addclass('f-dropdown').data('dropdowncontent','').append(           $('<li>').append(             $('<a>').prop('href',pl.psn).text('generate psn')           ),           $('<li>').append(             $('<a>').prop('href',pl.dcontact).text('download contact')           ),           $('<li>').append(             $('<a>').prop('href',pl.save).text('save provider list')           ),           $('<li>').append(             $('<a>').prop('href',pl.rating).text('view healthgrades rating')           ),         )       )     )     .appendto('#wrapper'); // add #wrapper }