Home > Article > Web Front-end > How to dynamically add to a list in jQuery

How to dynamically add to a list in jQuery

亚连Original: 2018-06-15 15:31:423151browse

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>

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!

jquery 事件 react native

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript local objectsNext article：JavaScript local objects

See more

How to dynamically add to a list in jQuery

Related articles