怎样用jquery为div添加一个div

怎样用jquery为div添加一个div,第1张

使用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")

})

})

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>

1、通过jquery给元素动态添加样式运用addClass和removeClass即可。首先在html中准备jquery库文件,并且准备一个div元素,如下图所示。

2、然后在style标签里声明一个class样式,如下图所示。

3、接下来准备一个事件加载初始化的方法,在jquery中直接用匿名函数即可,如下图所示。

4、然后通过jquery的addClass方法给div元素添加一个class,如下图所示。

5、移除一个class的样式也很简单,如下图所示,通过removeClass即可。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存