Append for loop to div in html

Question

Итак, я пытаюсь изучить javascript, и я думаю, что у меня есть рабочий скрипт json с циклом для захвата данных, но мне трудно понять, как добавить данные в мой div , После того, как я это выясню, я переделаю его в jquery (потому что я тоже пытаюсь это узнать).

Допустим, мой ДИВ идентификатор #wrapper

for (var i = 0; i < 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 to Provider List</a></li> \ 
       <li><a href="' + providerlisting[i].rating + '">View Healthgrades Rating</a></li> \ 
      </ul> \ 
     </div> \ 
    </div> \ 
')}; 

Answer 1

Не используйте document.write, это прямой выход (где когда-либо <script> может лежать). И, не вдаваясь в объекты DOM, вам нужно будет добавить .innerHTML. например

var wrapper = document.getElementById('wrapper'); 

for (...){ 
    /*document.write(*/ 
    wrapper.innerHTML += 
    '<div ...' 
    ; 
    /*);*/ 
} 

Теперь вы могли начать использовать DOM элементов вместо этого. например:

var wrapper = document.getElementById('wrapper'); 

for (...){ 
    // create the outer div (with classes 'entry panel row'): 
    var entry_panel_row = document.createElement('div'); 

    // add the class names: 
    entry_panel_row.className = 'entry panel row'; 

    // instead of document.write, add the HTML to this new element... 
    entry_panel_row.innerHTML += '<div class="large-4 ...</div>'; 

    // now append the element (as a whole) to wrapper 
    wrapper.appendChild(entry_panel_row); 
} 

Идя дальше, вместо того, чтобы использовать строки, вы можете создать элементы по одному, добавить свои их каждому из родителей. Затем, как только вы скомпилируете весь элемент DOM в entry_panel_row, вы можете перейти к wrapper.appendChild(entry_panel_row).

---

JQuery есть (немного) легче, чем el = document.createElement и parent.appendChild(el) снова и снова, и номенклатура занимает немного привыкнуть, но вот то, что у вас было. Я полагаю, что я бы перевести его, так что вы можете увидеть JQuery (вы упоминали его изучение):

for (var i = 0; i < providerlisting.length; i++){ 
    var pl = providerlisting[i]; // shorthand reference 

    // begin building you 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 to Provider List') 
     ), 
      $('<li>').append(
      $('<a>').prop('href',pl.rating).text('View Healthgrades Rating') 
     ), 
     ) 
    ) 
    ) 
    .appendTo('#wrapper'); // add it to #wrapper 
} 

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.