![](/img/trans.png)
[英]Children loop html append into parent loop inserted div by javascript
[英]Append for loop to div in html
所以我正在嘗試學習JavaScript,我想我有一個帶有循環的json腳本來抓取數據,但是我在弄清楚如何將數據追加到div時遇到了麻煩。 在弄清楚這一點之后,我將在jquery中重做它(因為我也想學習這一點)。
假設我的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> \
')};
不要使用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
}
您可以使用
document.getElementById('wrapper').innerHtml = document.getElementById('wrapper').innerHtml + 'new content';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.