jquery 向DIV动态添加元素

jquery 向DIV动态添加元素,第1张

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

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

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

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

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

代码如下:

<html>

    <body>

        <button onclick="addDiv()">添加</button>

        <div class="container">

        

        </div>

    </body>

</html>

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

<script type="text/javascript">

    var addDiv = function(){

        var $div = $('.container')

        $div.append('<div>添加</div>')

    }

</script>

这不是固定死的内容格式吗

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title><script src="jquery-1.8.3.min.js" type="text/javascript"></script></head><body><input type="button" value="插入" onclick="add(1)"/><input type="button" value="复制" onclick="add(2)"/><input type="button" value="替换" onclick="add(3)"/><input type="button" value="删除" onclick="add(4)"/><input type="button" value="格式" onclick="add(5)"/><div id="content"></div><div id="text" style="display:none"><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p></div><script>function add(str){switch(str){case 1:$("#content").html($("#text").html())breakcase 2:$("#content").append($("#text").html())//以下两种方式任选 添加一个隐藏的div,或者直接写死在上面breakcase 3:$("#content").html("<p>春眠不觉晓</p><p>处处闻啼鸟</p><div>夜来风雨声</div><p>花落知多少</p><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>")breakcase 4:$("#content").html("<p>春眠不觉晓</p><p>处处闻啼鸟</p><div>夜来风雨声</div><p>花落知多少</p><p>春眠不觉晓</p><p>处处闻啼鸟</p>")breakcase 5:$("#content").css("color","blue")breakdefault:break}}</script></body><script></script></html>


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存