在网格中动态添加新div

Question

我没什么问题，因为我想动态添加（创建）新div（网格单元格）点击按钮。这很简单，但是当我希望这个div添加三行并在下面添加下一行（同样是三列）并且总是将新的div添加为第一行时，麻烦就开始了。总结我想用三列和无穷大的行动态创建网格，新的div总是第一个。

感谢您的时间和帮助：）

Answer 1

一种方法是这样的，使用 jQuery 及其append()方法：

$('button').on('click', function(){
  $('#container').append($('<div class="item">'));
});

div.item{
  width: 30%;
  height: 50px;
  background: red;
  margin: 10px;
  float: left;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add div</button>
<div id='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>