jQuery將li元素插入列表開頭

antzone發表於2018-07-14
jQuery

本章節分享一段程式碼例項，它使用jQuery實現了將新的li元素插入到li元素列表的開頭。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>  
<style type="text/css">  
#box li{
  width:300px;
  height:30px;
  list-style-type:none;
  font-size:12px;
}
</style>  
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#bt").click(function(){
    var newLi=$("<li>本站的url地址是softwhy.com</li>")
    newLi.insertBefore($("li").eq(0));  
  })
});
</script>
</head>  
<body>  
<ul id="box">
  <li>螞蟻部落歡迎您</li>
  <li>只有努力奮鬥才會有美好的未來</li>
  <li>沒有人一開始就是高手</li>
  <li>只有當下的時間才是最珍貴的，不要期待明天。</li>
</ul>
<input type="button" id="bt" value="檢視效果"/>
</body>  
</html>

上面的程式碼實現了我們的預期效果，程式碼非常簡單。

相關閱讀:

（1）.insertBefore方法參閱jQuery insertBefore()一章節。

（2）.eq方法參閱jQuery eq()一章節。

相關文章