javascript - 在 flex-box 中为动态添加的 flex-item 添加一个按钮

Question

我想在最初添加第一个元素后添加的最后一个元素上添加“单击我”按钮。目前“点击我”按钮出现在底部。对于第一个元素，按钮可能以这种方式显示，但对于后续元素，按钮必须位于最后添加的元素上。

$('#clickMe').click(function() {
    $('#Demosss').append($('<li  class="flex-item">').text('dar'));
});

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    margin-right: 15px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
ul li{
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>

Answer 1

这就是您要实现的目标吗？

$('#clickMe').click(function() {
    $('#Demosss').append($('<li  class="flex-item">').text('dar'));
    $(this).insertAfter($('[class^="flex-item"]').last());
});

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    margin-right: 15px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
    display: inline-block;
    
}
ul li{
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>


<button id="clickMe">Click Me</button>