dom 操作

发布时间:2022-06-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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 操作全部内容,希望文章能够帮你解决dom 操作所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: