使用Javascript - 使用appendChild輸入到多個div具有相同類

Question

我試圖創建一個附加功能到一個新的新的輸入添加到所有與類名國內列。

現在我已經創造了在JavaScript的代碼，但它因爲它設置爲第一個孩子，只增加了第一。如果我刪除它，我得到了一個錯誤信息（「使用appendChild是不是一個函數」）

是否有可能做到這一點？我搜索了很多帖子，並沒有找到任何答案。

HTML

<!-- START ONJECTIVES CONTAINER --> 
    <div class="container" id="weighings"> 
     <!-- DOMESTIC NAME --> 
     <div class="colum" id="columtext"> 
     <p>Domestic</p> 
     </div> 
     <!-- COLUM 4 DESCRIPTION --> 
     <div class="colum discription domestic" id="regio"> 
     <p>Description</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
     <!-- COLUM 5 LOW --> 
     <div class="colum domestic" id="regio"> 
     <p>Low</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
     <!-- COLUM 6 MEDIUM --> 
     <div class="colum domestic" id="regio"> 
     <p>Medium</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
     <!-- COLUM 7 HIGH --> 
     <div class="colum domestic last" id="regio"> 
     <p>High</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
     <!-- COLUM 8 LOW --> 
     <div class="colum domestic" id="regio"> 
     <p>Low</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
     <!-- COLUM 9 MEDIUM --> 
     <div class="colum domestic" id="regio"> 
     <p>Medium</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
     <!-- COLUM 10 HIGH --> 
     <div class="colum domestic" id="regio"> 
     <p>High</p> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     <input id="box" type="text" oninput="calculate()" /> 
     </div> 
    </div> 
     <!-- END CONTAINER --> 

SCSS

  #box{ 
      margin-top:5px; 
      width:10px; 
      height:10px; 
      background:black; 
      } 

     .colum{ 
      display: block; 
      width: 200px; 
      text-align:center; 
     } 

    #regio{ 
     width:50px; 
     margin-right:10px; 
     input{ 
     width:50px; 
     } 
    } 

    .row{ 
    width:100%; 
    height:30%; 
    } 

的Javascript

document.getElementById("newrow").onclick = function() { 
    var ok = true; 

    if (ok === true) { 
     for(i=0;i<8;i++){ 
      var input = document.createElement('input'); 
      input.id = 'box'; 
      input.type = 'text'; 
      input.oninput = 'calculate()'; 

     document.getElementsByClassName('domestic')[0].appendChild(input); 
     } 
    } 
}; 

Codepen： http://codepen.io/salman15/pen/pNELXM?editors=0110

Answer 1

你只是把它的第一行上這行代碼：

document.getElementsByClassName('domestic')[0].appendChild(input); 

你可以看到，它是獲得[0]（第一個元素的數組與國內一類的元素），然後永遠不會後來一個。我們需要迭代類名爲domestic的元素數組，然後將其保存到一個變量中，並且做到這一點。

我會做這樣的：

document.getElementById("newrow").onclick = function() { 

var elements = document.getElementsByClassName('domestic'); 
    // if there are no elements found with the class of domestic, do nothing. 
if(elements.length == 0) return false; 

    // otherwise, lets do it! We can make the input box ONCE and append it to multiple divs, because it is always the same box we are appending. Much faster. That is why it is out of the loop now. 
    var input = document.createElement('input'); 
    input.id = 'box'; 
    input.type = 'text'; 
    input.oninput = 'calculate()'; 

    //we set the condition to the LENGTH OF OUR ARRAY which contains the elements of the class name document. 
    for(i=0;i< elements.length; i++) { 
    elements[i].appendChild(input); 
    } 
}; 

的jQuery：

$('#newrow').on('click', function() { 
    var eles = $('.domestic'); 
    eles.each(function($k, $v) { 
     $(this).append(input); 
    }); 
}); 

Answer 2

循環收集，添加輸入：

var elems = document.getElementsByClassName('domestic'); 
for (var i = 0; i < elems.length; i++) { 
    elems[i].appendChild(input); 
}