甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
!doctype html
创新互联建站从2013年成立，先为连云港等服务建站，连云港等地企业，进行企业商务咨询服务。为连云港企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
html
head
meta charset="utf-8"
title插入输入框/title
script type="text/javascript" src="js/jquery-3.1.1.min.js"/script
script
function f1(){
var text='div class="a1"/divinput type="text"br';
if($("#a1").val()!="")
{
$("#baojie li").append(text);
};
};
/*function f1(btn){
var x = document.createElement("li");
var z=document.getElementById("baojie");
var input=document.getElementById("a1");
var name = input.value;
if(name != ""){
z.appendChild(x).innerHTML='div class="a1"'+'/div'+'input type="text"'+'br';
}else{
return;
}
}*/
/script
style type="text/css"
.neirong li{
list-style-type:none;
display:inline;
}
.neirong{
width:400px;
margin:0 auto;
}
.neirong div{
text-align:center;
width:50px;
display:inline-block;
margin:10px 0;
}
.neirong #btn{
background:none;
border:none;
color:#3d8ad4;
}
.neirong .a1{
height:16px;
width:58px;
}
/style
/head
body
!--logo--
div class="neirong"
form
uldiv时间/div
li
input type="text"
/li
/ul
ul id="baojie"div保洁员/div
li
input type="text" id="a1"/input type="button" value="+添加一行" id="btn" onClick="f1(this)" /br/
/li
/ul
uldiv费用/div
li
input type="text"
/li
/ul
/form
/div
/body
/html
这是我写的一个点击按钮添加输入框的代码，你可以参考一下（注意，我这是必须在输入框里输入内容后才能添加）
应当使用append()方法，因为html()方法用于设置内容时，会重写所有匹配元素的内容，因此会替换。
1、关于append（）方法定义和用法：
append() 方法在被选元素的结尾插入指定内容。此外，如需在被选元素的开头插入内容，请使用 prepend() 方法。
2、语法：
$(selector).append(content,function(index,html))。
3、设计一个简单的html页面，存在一个div，和一个添加按钮。
4、设计简单的css样式：
5、此时的页面展示如下：
6、设计一个简单的select元素：
7、此时点击一次按钮，查看页面效果:
8、再次点击，如下出现两个select。
可以先给div标签设置id，然后给这个id绑定点击事件。
1、新建html文档，在body标签中添加一个div标签，为div标签设置一个id，这里以“demo”为例：
2、在head标签中引入jquery的js文件，这时可以使用cdn链接：
3、添加script标签，在script标签中绑定“demo”，然后使用click函数为div标签绑定点击事件：
jquery 复制DIV内容到另一个div中
例如下代码:
i class="m_tab" id="A_name"张三/i
i class="m_tab" id="A_sex"男/i
i class="m_tab" id="A_age"30/i
把以上已生成的内容对应复制到下面input框里:
input class="m_input" id="B_name" value="张三"
input class="m_input" id="B_sex" value="男"
input class="m_input" id="B_age" value="30"
可以使用下方代码：
function showDiv(xid){
var div1 = $('#A_'+xid),a = $('#B_cname');
var div2 = $('#A_sex'),b = $('#B_sex');
var div3 = $('#A_age'),c = $('#B_age');
for(var i=0;idiv1.length;i++){a.append(''+div1[i].innerText+'')}
for(var i=0;idiv2.length;i++){b.append(''+div2[i].innerText+'')}
for(var i=0;idiv3.length;i++){c.append(''+div3[i].innerText+'')}
扩展资料：
语言特点
1、快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
2、提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3、创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
4、提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
5、增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
6、更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
参考资料来源：百度百科-jQuery
1、jQuery设置css样式
div style="background-color:#ffffff;padding-left:10px;"测试jQuery动态获取padding-left/div
2、用css()方法返回元素的样式属性
$("div").css("padding-left"));
3、用css()设置样式
$("div").css("color","yellow");
4、设置多个样式
$("div").css({"background-color":"yellow","font-size":"200%"});
var css = {
background-color: '#EEE',
height: '500px',
margin: '10px',
padding: '2px 5px' };
$("div").css(css);
使用attr()或prop()方法为id属性赋值即可，关键代码
$(obj_div).attr('id',id_name);
$(obj_div).prop('id',id_name);
实例演示如下：点击按钮设置div标签的id为test，为了便于观察效果，css中设置了id为test的样式为红色
1、HTML结构
style
#test{color:red !important; font-weight:bold;}
/style
div我是示例DIV/div
input type="button" value="设置上一个div的id为test"
2、jquery代码
$(function(){
$("input:button").click(function() {
$(this).prev("div").attr("id","test");
});
});