javascript - 从底部开始将元素附加到 div？

Question

我有以下代码:

$('button').click(function() {
  $('#parent').append('<div>element</div>');
});

 #parent {
   height: 200px;
   width: 100px;
   border: 1px solid #ccc;
 }

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

https://jsfiddle.net/8ybnycxv/1/

单击按钮时，我想将一个 div 元素附加到 #parent。但是，如果 #parent 中还没有元素，则会从 #parent 的bottom 开始添加元素。我该怎么做？

编辑:添加演示图片

Answer 1

设置 vertical-align:bottom 将起作用

$('button').click(function() {
    $('#parent').append('<div>element</div>');
});

#parent {
    height: 200px;
    width: 100px;
    border: 1px solid #ccc;
    display: table-cell;
    vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div id="parent"></div>
<button>
Add
</button>