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

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

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

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

1、我们先引入jquery的脚本文件。

2、在html里,我们在一个div里有内容「百度」。

3、后面添加一个按钮,有一个changeText的事件函数。

4、在changeText方法里,我们先使用jquery通过id获得对应的div。

5、然后使用jquery的html方法来直接设置新的文字内容就行了。

6、点击按钮后,div的文字内容变成「百度知道」了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11627128.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存