JS中的节点操作
程序员文章站
2022-05-01 23:21:02
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<script src='jquery-1.8.3.min.js'></script>
<style>
.wrap{
width:600px;
height:600px;
border:1px solid pink;
}
.box{
width:100px;
height:100px;
background:red;
border-radius: 50%;
float:left;
}
</style>
</head>
<body>
<button>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>before()</button>
<button>empty()</button>
<button>remove()</button>
<button>clone()</button>
<button>获取页面元素直接插入</button>
<div class='wrap'></div>
<script>
//将元素插入到指定元素内部的尾部
$('button').eq(0).click(function(){
//调用创建元素的函数
var a =createA();
$('.wrap').append(a);
})
//将元素插入到指定元素的前面
$('button').eq(1).click(function(){
//调用创建元素的函数
var a =createA();
$('.wrap').prepend(a)
})
//将元素插入到指定元素外部的后面
$('button').eq(2).click(function(){
//调用创建元素的函数
var a =createA();
$('.wrap').after(a)
})
//将元素插入到指定元素外部的前面
$('button').eq(3).click(function(){
//调用创建元素的函数
var a =createA();
$('.wrap').before(a)
})
//清空wrap内部的所有子元素
$('button').eq(4).click(function(){
$('.wrap').empty();
})
//删除指定的元素 可以把自己也删除
$('button').eq(5).click(function(){
$('.wrap').remove();
})
//将第一个button按钮复制，并插入到wrap
$('button').eq(6).click(function(){
var newbutton =$('button:first').clone(true);
$('.wrap').append(newbutton);
})
// 把append换成before试试
// clone()传参数true 会把事件也克隆进来
// 获取页面元素直接插入
$('button').eq(7).click(function(){
$('.wrap').append($('button').eq(0));
})
//注意： 如果直接将页面中的元素插入到指定位置，name会将原来的元素剪切掉，所有请先clone(true)
//创建元素
function createA(){
//创建一个元素
var a=$('<div class="box"></div>');
a.css('background','rgb('+rand(0,255)+','+rand(0,255)+','+rand(0,255)+')');
return a;
}
//随机数
function rand(n,m){
return Math.floor(Math.random()*(m-n+1))+n;
}
</script>
</body>
</html>
下一篇： 周文王为什么会被称作西伯？有什么含义