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