怎么用JQuery动态添加div 比如 添加 点击一次添加按钮 增加一个div

如题所述

<!doctype html>
<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>

这是我写的一个点击按钮添加输入框的代码,你可以参考一下(注意,我这是必须在输入框里输入内容后才能添加)

温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答