Rumah > hujung hadapan web > tutorial js > 在jQuery中如何实现向列表动态添加

在jQuery中如何实现向列表动态添加

亚连
Lepaskan: 2018-06-15 15:31:42
asal
3325 orang telah melayarinya

这篇文章主要介绍了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>
Salin selepas log masuk

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue中有关datepicker的示例代码

如何解决网站不登录就无法复制内容的问题

Vue中datepicker插件无法监听datepicker输入框的值问题

在React中有关组件间抽象详细说明

React Native中NavigatorIOS组件(详细教程说明)

有关ejsExcel模板使用方法

Atas ialah kandungan terperinci 在jQuery中如何实现向列表动态添加. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan