<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"></div><input 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>
<ul><div>时间</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>
<ul><div>费用</div>
<li>
<input type="text">
</li>
</ul>
</form>
</div>
</body>
</html>
这是我写的一个点击按钮添加输入框的代码，你可以参考一下（注意，我这是必须在输入框里输入内容后才能添加）
使用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 !importantfont-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")
})
})
这不是固定死的内容格式吗1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title><script src="jquery-1.8.3.min.js" type="text/javascript"></script></head><body><input type="button" value="插入" onclick="add(1)"/><input type="button" value="复制" onclick="add(2)"/><input type="button" value="替换" onclick="add(3)"/><input type="button" value="删除" onclick="add(4)"/><input type="button" value="格式" onclick="add(5)"/><div id="content"></div><div id="text" style="display:none"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div><script>function add(str){switch(str){case 1:$("#content").html($("#text").html())breakcase 2:$("#content").append($("#text").html())//以下两种方式任选 添加一个隐藏的div，或者直接写死在上面breakcase 3:$("#content").html("<p>春眠不觉晓</p><p>处处闻啼鸟</p><div>夜来风雨声</div><p>花落知多少</p><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>")breakcase 4:$("#content").html("<p>春眠不觉晓</p><p>处处闻啼鸟</p><div>夜来风雨声</div><p>花落知多少</p><p>春眠不觉晓</p><p>处处闻啼鸟</p>")breakcase 5:$("#content").css("color","blue")breakdefault:break}}</script></body><script></script></html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）