<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>
这是我写的一个点击按钮添加输入框的代码,你可以参考一下(注意,我这是必须在输入框里输入内容后才能添加)
1、我们先引入jquery的脚本文件。
2、在html里,我们在一个div里有内容「百度」。
3、后面添加一个按钮,有一个changeText的事件函数。
4、在changeText方法里,我们先使用jquery通过id获得对应的div。
5、然后使用jquery的html方法来直接设置新的文字内容就行了。
6、点击按钮后,div的文字内容变成「百度知道」了。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)