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 () {
$('#btn').click(function () {
$('ol').append('<li>'+$('#text').val()+'</li>');
});
});
</script>
</body>
</html>Above I compiled it for everyone. I hope it will be helpful to everyone in the future.
Related articles:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
