附加 li 作为最后一个孩子（2）

Question

<div class="container">
<div class="tokens">
<ul class="tokenlist list-inline">
<li>
<div class="input">
<input type="text" class="king" placeholder="enter ur mail"> 
</div>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function(){
;$.fn.pressEnter = function(fn) {  
return this.each(function() {  
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});  
}; 
$('.king').pressEnter(function(){
var inputtval=$('.king').val();
if(inputtval.length>0){
$("ul.tokenlist").prepend('<li>'+inputtval+'&emsp;<i class="cros fa fa-times cros"></i> </li>');
$('.king').val('');
}else{
$(this).attr("placeholder", "write somthing");
}
});
$('.tokenlist').on('click','.cros',function(){
$(this).parents('li').remove();
});
});
</script>
<style>
.king{
    border:0px;
    /*background-color:#eee;*/
}
i.cros{
    font-weight: 100;
    cursor: pointer;
}
ul.tokenlist li{
border: 1px solid #eee;
background-color:#eee;
margin: 5px;
border-radius: 10px;
}
ul.tokenlist li:last-child{
border:0;
background-color:#fff;
}
ul.tokenlist {
border: 1px solid rgb(194, 194, 194);
width: 100%;
margin: 3px;
}
</style>

上面的代码我正在使用 prepend，我尝试使用 append 它不起作用...append prepend 不是我的概念，无论我在 inputfild 中输入什么并按 Enter，它都应该显示在 input filde 的左侧。 在上面的代码中，我想将 li 添加为 last-child(2) 或最后一个子级，并且我添加的内容应该是输入字段的左侧，现在我添加的内容是左侧，但应该是左侧输入字段Fiddle link

Answer 1

您需要在列表中的最后一项之前插入新的<li>，而不是添加新的<li>。看到这个小提琴。 https://jsfiddle.net/bch371ff/1/

$('<li>'+inputtval+'&emsp;<i class="cros fa fa-times cros"></i> </li>').insertBefore($("ul.tokenlist").children().last());