目录
jQuery 元素的节点操作
- 记下方代码为
code1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<script src="./jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0}
.wrap{
width: 800px;
height: 600px;
border: 1px solid red;
}
.item{
width: 100px;
height: 100px;
background: blue;
border-radius: 50%;
float: left;
}
</style>
</head>
<body>
<button>在元素内部之末插入元素</button>
<button>在元素内部之首插入元素</button>
<button>在元素外部之末插入元素</button>
<button>在元素外部之首插入元素</button>
<button>删除节点</button>
<button>清空</button>
<button>克隆</button>
<button>注意</button>
<div class="wrap"></div>
<script>
// ...... (1)
</script>
</body>
</html>1. 创建节点
- 在 code1 的 (1) 处加入如下代码
var oDiv = $('<div>这是一个div元素</div>');2. 插入节点
- 同“创建节点”一样，“插入节点”的代码均写在 code1 的 (1) 处，且在“创建节点”的代码下面
- 先写两个会用到的函数，不妨写在 code1 的 (1) 处的末尾
// 1. 定义随机数函数
function rund(m, n){
return Math.floor(Math.random() * (n-m+1)) + m;
}
// 2. 定义创建新元素的函数
function creatDiv(){
oDiv = $('<div class="item"></div>');
oDiv.css('background', 'rgb('+rund(0,255)+','+rund(0,255)+','+rund(0,255)+')');
}2.1 在现存元素的内部，从后面插入元素
2.1.1 方法一：append()
$('button').eq(0).click(function(){
creatDiv(); // 调用创建新元素的函数
$('.wrap').append(oDiv); // 在 wrap 内部之末插入 oDiv
});2.1.2 方法二：appendTo()
$('button').eq(0).click(function(){
creatDiv();
oDiv.appendTo($('.wrap')); // 将 oDiv 插入到 wrap 内部之末
});2.2 在现存元素的内部，从前面插入元素
2.2.1 方法一：prepend()
$('button').eq(1).click(function(){
creatDiv();
$('.wrap').prepend(oDiv); // 在 wrap 内部之首插入 oDiv
});2.2.2 方法二：prependTo()
$('button').eq(1).click(function(){
creatDiv();
oDiv.prependTo($('.wrap')); // 将 oDiv 插入到 wrap 内部之末
});2.3 在现存元素的外部，从后面插入元素
2.3.1 方法一：after()
$('button').eq(2).click(function(){
creatDiv();
$('.wrap').after(oDiv); // 在 wrap 外部之末插入 oDiv
});2.3.2 方法二：insertAfter()
$('button').eq(2).click(function(){
creatDiv();
oDiv.insertAfter($('.wrap')); // 将 oDiv 插入到 wrap 外部之末
});2.4 在现存元素的外部，从前面插入元素
2.4.1 方法一：before()
$('button').eq(3).click(function(){
creatDiv();
$('.wrap').before(oDiv); // 在 wrap 外部之首插入 oDiv
});2.4.2 方法二：insertBefore()
$('button').eq(3).click(function(){
creatDiv();
oDiv.insertBefore($('.wrap')); // 将 oDiv 插入到 wrap 外部之首
});3. 删除节点与清空节点
3.1 删除节点
$('button').eq(4).click(function(){
$('.wrap').remove(); // 删除元素，可以删除自己
// $('body').remove(); // 使用 body 标签也行
}); 3.2 清空节点
$('button').eq(5).click(function(){
$('.wrap').empty(); // 清空元素，不删除自己
});4. 克隆节点
- 如果单纯的只是为了克隆元素，那么里面不需要传参数
- 如果需要连同元素身上的事件一起克隆，那就在括号中写 true
$('button').eq(6).click(function(){
// var newBtn = $('button').eq(6).clone(); // 注意 true 填与不填的区别
var newBtn = $('button').eq(6).clone(true);
$('.wrap').before(newBtn); // 将克隆的元素插入到 wrap 外部的前面
});5. 注意事项
- 插入元素的时候，要先进行克隆，再进行插入操作，不然相当于对原来的元素作“剪切”+“粘贴”
$('button').eq(7).click(function(){
$('.wrap').append($('button').eq(0)); // 将第一个按钮添加到 wrap 中
// $('.wrap').append($('button').eq(0).clone()); // 先克隆，再插入
});