Question

我尝试创建一个添加函数，为类名为domestic的所有列添加一个新的输入。

现在我已经在JavaScript中创建了一个代码，但它只是将它添加到第一个代码中，因为它设置为第一个子代码。如果我删除它，我会收到一条错误消息（＆＃34; appendChild不是函数＆＃34;）

有可能这样做吗？我在很多帖子上搜索过，但没有找到任何答案。

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);
}

Javascript - AppendChild对具有相同类

2 个答案: