怎么用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>

使用 after 方法可以实现这种效果。

例如,我想在第2个DIV的后面动态去添加一个DIV,该如何实现?

html 代码:

<div id="parent">

    <div id="one">1</div>

    <div id="two">2</div>

    <div id="three">3</div>

</div>

Js 代码:

$(function(){

    $("#two").after("<div>我是新添加的内容</div>")

    //选择 ID 为 #two 的 DIV 节点,在其后边添加一个 DIV 节点

})

先掌握这种方法,然后再探究其他更多实现方式。


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存