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

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

给按钮添加一个onclick事件

点击跳转到函数

函数获取该div的父级节点

给该父级节点添加一个子级节点(即div)

注:添加哪个单词记不清楚了,好像带pareat字样,具体的你查一下手册。

问题分析:

1、删除:使用jQuery的remove方法。

2、添加:使用jQuery的append、after等多个方法,这些不同的方法是用来决定标签添加的相对位置。

举例如下:

以内部追加方法append为例。

添加DIV:

$('body').append('<div id="name">我是被添加的DIV标签</div>')

删除刚刚添加的DIV:

$('#name').remove()

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

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/8024771.html

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

发表评论

登录后才能评论

评论列表(0条)

保存