How to dynamically add to a list in jQuery-JS Tutorial-php.cn

How to dynamically add to a list in jQuery

亚连

Release： 2018-06-15 15:31:42

Original

3101 people have browsed it

This article mainly introduces jQuery's simple method of dynamically adding new elements to a list, involving implementation techniques related to jQuery event response and dynamic operation of page elements. Friends in need can refer to the following

The examples in this article are described jQuery simply implements the method of dynamically adding new elements to a list. Share it with everyone for your reference, the details are as follows:

First take a look at the renderings:

The complete implementation code is as follows:

<!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>

Copy after login

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Sample code for datepicker in Vue

How to solve the problem that the website cannot copy content without logging in

The datepicker plug-in in Vue cannot monitor the value of the datepicker input box

Detailed description of abstraction between components in React

NavigatorIOS component in React Native (detailed tutorial description)

About how to use ejsExcel template

The above is the detailed content of How to dynamically add to a list in jQuery. For more information, please follow other related articles on the PHP Chinese website!