首頁  >  文章  >  web前端  >  在jQuery中如何實現向列表動態添加

在jQuery中如何實現向列表動態添加

亚连
亚连原創
2018-06-15 15:31:423159瀏覽

這篇文章主要介紹了jQuery簡單實現向列表動態添加新元素的方法,涉及jQuery事件響應及頁面元素動態操作相關實現技巧,需要的朋友可以參考下

本文實例講述了jQuery簡單實作為清單動態新增元素的方法。分享給大家供大家參考,如下:

先看看效果圖:

完整實作程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net jQuery列表添加新元素</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>li列表:</h3>
<ol>
    <li>jb51</li>
    <li>php</li>
    <li>javascript</li>
    <li>HTML5</li>
</ol>
<input type="text" id="text">
<input type="button" id="btn" value="添加">
<script type="text/javascript">
 $(function () {
    $(&#39;#btn&#39;).click(function () {
      $(&#39;ol&#39;).append(&#39;<li>&#39;+$(&#39;#text&#39;).val()+&#39;</li>&#39;);
    });
});
</script>
</body>
</html>

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

在Vue中有關datepicker的範例程式碼

如何解決網站不登入就無法複製內容的問題

Vue中datepicker外掛程式無法監聽datepicker輸入框的值問題

在React中有關元件間抽象詳細說明

#React Native中NavigatorIOS元件(詳細教學說明)

#有關ejsExcel範本使用方法

#

以上是在jQuery中如何實現向列表動態添加的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn