追加李在去年孩子（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> 

上面我使用前置码，我试图用追加它不工作...追加前插不是我concepet，我在inputfild输入什么都和回车键它应该显示输入filde的左侧.. 在上面的代码中，我想添加li作为最后一个孩子（2）或最后一个孩子，并且我追加了应该在输入filde的左侧，现在什么都是我附加它是左侧，但它应该左侧输入fild Fiddle link

Answer 1

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

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