在html中追加循環到div

所以我試圖學習JavaScript，我想我有一個工作的JSON腳本與循環來抓取數據，但我無法弄清楚如何將數據追加到我的div 。在我弄清楚之後，我將重做它在jquery中（因爲我也試圖瞭解這一點）。在html中追加循環到div

比方說，我的div id爲#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> \ 
')};

來源

2013-08-28 Chad

看到這個答案： http://stackoverflow.com/a/5677816/467133 祝你好運，學習jQuery！ –

我的建議是刪除一切，重新開始，因爲這是一團糟！避免使用document.write和長的HTML字符串。 – adeneo

Adeneo，我正在嘗試學習javascript。請嘗試在將來建設性的。 – Chad

不要使用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 
}

來源

2013-08-28 13:55:26

@Chad：用jQuery版本更新它（爲了您的觀賞樂趣）。快樂的編碼。 –

感謝Brad，我使用上面提供的DOM設置，而代碼在我的IDE中籤出，它不會將任何內容附加到包裝div。我將腳本外部包含在head標籤中，而不是內聯。我可以看到加載了正確的腳本，但沒有顯示。有任何想法嗎？ – Chad

@查德：在''？有機會，JavaScript沒有意識到一個名爲'＃wrapper'的元素，但是[當你閱讀jQuery時，這就是爲什麼一切都處於文檔就緒事件中的主要原因]。除非是Modernizr，否則所有'

您可以使用

document.getElementById('wrapper').innerHtml = document.getElementById('wrapper').innerHtml + 'new content';

來源

2013-08-28 13:58:58

相關問題

在html中追加循環到div

回答

相關問題