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

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

JQuery中点击一次添加按钮,增加一个div的思路如下

给按钮注册一个点击的监听事件

在监听器中创建一个div元素附加在一个html元素后面

示例代码如下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style type="text/css">

#father

{

 width:150px

 height:150px

 background-color:red

}

#father div

{

 width:50px

 height:50px

 background-color:green

 font-size:12px

}

</style>

<script type="text/javascript" src="/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#btn").click(function(){

  

  })

  //father元素后面增加一个div元素

 $("#father").prepend("<div>新的div</div>")

})

</script>

</head>

<body>

<input type="button" value="增加div" id="btn">

<div id="father"></div>

</body>

</html>

jquery 点击增加样式,点击移除样式,代码如下:

$("li").click(function(){

$(this).toggleClass("enable")

$(this).siblings().removeClass("enable")

})

扩展资料

如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:

$("p").removeClass("high")

//移除p元素中值为"high"的class

参考资料:百度百科 jQuery

百度百科 样式 (计算机术语)

1、新建一个html文件,命名为test.html。

2、在test.html文件内,使用p标签创建一个区域,下面将在p标签内添加一个a标签。

3、在test.html文件内,设置p标签的id为mytest,主要用于下再通过该id获得p标签对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“添加一个a标签”。

5、在test.html文件内,给button按钮绑定onclick点击事件,当按钮被点击时,执行addaa()函数。

6、在js标签中,创建addaa()函数,在函数内,创建一个变量html保存要添加的a标签,再使用append()方法向被选对象(p标签)内添加一个a标签。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存