使用javascript動態創建多個div與多個元素？

Question

我在新的JavaScript，我想創建DIV其中有多個DIV和多個elements.See代碼如下

<style> 
 
    .list-group li { 
 
     list-style: none; 
 
    } 
 

 
    .panel-info, .panel-rating, .panel-more1 { 
 
     float: left; 
 
     margin: 0 10px; 
 
     height: 60px; 
 
    } 
 

 
    .icon { 
 
     height: 30px; 
 
     width: 30px; 
 
    } 
 

 
    .header { 
 
     background-color: #f44336; 
 
     padding: 15px 20px; 
 
     color: white; 
 
     text-align: center; 
 
    } 
 
</style> 
 

 
<div id="listContainer"> 
 
    <div> 
 
     <ul class="list-group"> 
 
      <li> 
 

 
       <div class="panel-body panel panel-default" style="height: 70px;"> 
 
        <div class="panel-info"> 
 
         <p><strong>Shailendra Kushwah</strong></p> 
 

 
        </div> 
 

 
        <div class="panel-more1"> 
 
         <img src="img/feestatus/cancel-button.png" class="icon" /> 
 
         <br /><span>Installment 1</span> 
 
        </div> 
 
        <div class="panel-more1"> 
 
         <img src="img/feestatus/cancel-button.png" class="icon" /> 
 
         <br /><span>Installment 2</span> 
 
        </div> 
 
        <div class="panel-more1"> 
 
         <img src="img/feestatus/cancel-button.png" class="icon" /> 
 
         <br /><span>Installment 3</span> 
 
        </div> 
 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

我想動態的長度的基礎上，建立事業部 id="listContainer"的元素我使用loop.Please幫助

Answer 1

沒有js，沒有數組。但獨立於所有那些，

如果你想將元素添加到當前的DOM結構，

首先，你需要創建它。無論你想

var new_element = document.createElement('div') 
//might be p, span, ol, li, a, section etc. 

然後追加它。

var my_container = document.getElementById("my-container") 
my_container.appendChild(new_element); 
/* 
* for most bottom of current dom node 
* document.body.appencdChild(new_element) 
*/ 

因此，您有一個對該元素的引用，您可以通過javascript設置屬性。

new_element.setAttribute('id', 'new-element-id') 
//<div id='new-element-id' ... 
new_element.classList.add('lorem') 
//<div id='new-element-id' class='lorem' ... 
new_element.classList.add('ipsum') 
//<div id='new-element-id' class='lorem ipsum' ... 

如果你想添加多個元素，這也不難。

var giants = ['marx', 'engels', 'lenin'] 
for(i=0; i<giants.length; i++) { 
    var g = document.createElement('div'); 
    g.setAttribute('id', giants[i]); 
    document.body.appendChild(g); 
} 

，或者更時尚

giants.forEach(function(e) { 
    var g = document.createElement('div'); 
    g.setAttribute('id', e); 
    document.body.appendChild(g); 
}) 

下面段將添加5周的div（包括圖像和跨度和跨度文本）與一些數據。

insert_divs = function() { 
 
    var parent = document.getElementsByClassName("panel-body")[0]; 
 
    var installments = ['Installment 1', 'Installment 2', 'Installment 3', 'Installment 4', 'Installment 5']; 
 
    
 
    installments.forEach(function(e){ 
 
    
 
    var sp = document.createElement('span'); 
 
    var img = document.createElement('img'); 
 
    var installment = document.createElement('div'); 
 
    
 
    var span_text = document.createTextNode(e); 
 
    sp.appendChild(span_text); 
 

 
    img.setAttribute('src', 'https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_cancel_48px-128.png') 
 
    installment.classList.add('panel-more1'); 
 
    
 
    installment.appendChild(img); 
 
    installment.appendChild(sp); 
 
    
 
    parent.appendChild(installment); 
 

 
    }); 
 
    
 

 

 
} 
 

 
window.onload = insert_divs

<div id="listContainer"> 
 
    <div> 
 
     <ul class="list-group"> 
 
      <li> 
 
       <div class="panel-body panel panel-default" style="height: 70px;"> 
 
        <div class="panel-info"> 
 
         <p><strong>Shailendra Kushwah</strong></p> 
 

 
        </div> 
 

 
       </div> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>