dom 操作

2021/11/11 23:10:31

本文主要是介绍dom 操作,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

内部插入=>子节点 $(".append").click(function(){                 //$("ul").append("<li>列表 append</li>") //追加后边                 $("<li>列表 append</li>") .appendTo($("ul"));//效果相同             })             $(".prepend").click(function(){                 $("ul").prepend("<li>列表 prepend</li>")//在所有子元素的前面             }) 外部插入=>兄弟节点 $(".before").click(function(){                $("ul").before("<li>列表 before</li>");//上面             })             $(".after").click(function(){                 $("ul").after("<li>列表 after</li>");//下面             }) 包裹=>父节点 $(".wrap").click(function(){                 $("ul").wrap("<div style='color:red'></div>");//包裹             }) //修改             $(".replaceWith").click(function(){                 $("li:first").replaceWith("<li>列表 new</li>")             })             //删除             $(".empty").click(function(){                 $("li:first").empty()//清空子元素内容             })             $(".remove").click(function(){                 $("li:first").remove()//删除子元素             })             $(".clone").click(function(){                 $("li:first").clone().appendTo($("ul"))/克隆             })    // click单击   // dblclick 双击 中间空格隔开             $("ul").on("click dblclick","li",function(){                 console.log($(this).text());             }) 所有都是点击事件用button按钮 ul li 显示列表内容一到五

这篇关于dom 操作的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程