首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
JQuery中的Dom操作-创建节点/插入节点/删除节点
作者：小萝卜 2023-03-24 【 jquery 】 浏览 475
简介JQuery中的Dom操作-创建节点/插入节点/删除节点
创建节点:$(html)
var $li_1 = $("<li></li>");
var $li_2 = $("<li></li>");
$("ul").append($li_1);
$("ul").append($li_2);
插入节点
.append()
.appendTo()
.prepend()
.prependTo()
.after()
.insertAfter()
.before()
.insertBefore()
删除节点
.remove ()： 删除节点，返回当前删除的对象;
.empty()： 清空节点里面的内容;
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#all{width:800px;height:400px;margin:0 auto;border:dashed 2px orange;}
.item{width:100px;height:100px;background:black;border-radius:50%;float:left;}
.b{border:solid 1px #333;padding:5px;}
</style>
</head>
<body>
<button>在div内部的尾部添加</button>
<button>在div内部的头部添加</button>
<button>在div外部的尾部添加</button>
<button>在div外部的头部添加</button>
<button>清空元素</button>
<button>删除最后一个元素</button>
<button>替换第一个元素</button>
<button>克隆</button>
<button>包裹</button>
<button>解包</button>
<div id="all"></div>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
//获取第一个元素绑定事件
$('button:eq(0)').click(function(){
//获取新的div
var newD = createDiv();
//执行插入
$('#all').append(newD);
// newD.appendTo('#all');
})
//绑定第二个按钮的单击事件
$('button:eq(1)').click(function(){
var d = createDiv();
//执行插入
// $('#all').prepend(d);//pre在...之前
d.prependTo('#all');
})
//绑定第三个
$('button:eq(2)').click(function(){
var d = createDiv();
//外部尾部插入
// $('#all').after(d);//after在...之后
d.insertAfter('#all');
})
//绑定第四个
$('button:eq(3)').click(function(){
var d = createDiv();
//外部头部插入
// $('#all').before(d);
d.insertBefore('#all');
})
//绑定第五个
$('button:eq(4)').click(function(){
//清空操作
$('#all').empty();//emtpy空 false 0 0.0 '' '0' array() null
})
//绑定第六个
$('button:eq(5)').click(function(){
//获取最后一个子元素
// $('.item:last').remove();
$('.item:first').remove();
})
//封装函数实现div创建
function createDiv(){
var d = $('<div class="item">iloveyou</div>');//创建一个空的div元素
//样式操作
// d.addClass('item');
var r = rand(0,255);
var g = rand(0,255);
var b = rand(0,255);
d.css('background','rgb('+r+','+g+','+b+')');
//返回对象
return d;
}
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1))+m-1;
}
// setInterval(function(){
// var d = createDiv();
// $('#all').append(d);
// },50);
</script>
</body>
</html>
很赞哦！ (0)
