jQuery教程 HTML+jQuery实现动态添加输入框-职坐标

jQuery教程 HTML+jQuery实现动态添加输入框

沉沙 2018-10-25 来源：阅读 1209 评论 0

摘要：本篇教程介绍了jQuery教程 HTML+jQuery实现动态添加输入框，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 HTML+jQuery实现动态添加<input>输入框，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

一个html文件和一个js文件配合，在html文件里引入js文件，用jQuery为<a>标签添加一个点击事件，事件里只需写一个append函数就可以。
HTML源码：

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>Title</title>
6     <script src="jquery-2.2.2.min.js"></script>
7     <script src="add.js"></script>
8 </head>
9 <body>
10     <form method="post" action="">
11         专题列表：<a href="#" id="AddMoreTextBox" >添加输入框</a>
12                   <br/>
13         <div id="InputsWrapper">
14                   <input type="text" name="news[]" id="news_1" value="Text 1"><br/><br/>
15                   <input type="text" name="news[]" id="news_2" value="Text 2"><br/><br/>
16                   <input type="text" name="news[]" id="news_3" value="Text 3"><br/><br/>
17             </div>
18                   <input type="submit" name="edit" value="提交">
19         </form>
20 </body>
21 </html>

jQuery源码：

1 $(document).ready(function () {
2     var InputCount=3;
3     $("#AddMoreTextBox").click(function (e)
4     {
5             InputCount++;
6             $("#InputsWrapper").append(‘<label></label><input type="text" name="news[]" id="news_‘ + InputCount + ‘" value="Text ‘+ InputCount +‘"/><br/><br/>‘);
7     });
8 });