ipkiss ipkiss - 2 months ago 17
CSS Question

Append element to div starting at the bottom?

I have the following code:



$('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/

When the button is clicked, I want to append a div element to the
#parent
. However, if there is no element in the
#parent
yet, elements will be added starting at the bottom of the
#parent
. How can I do that?

Edit: added the demonstrating picture

enter image description here

Answer

Setting vertical-align:bottom will work

$('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>