本文主要是介绍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 操作的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!