JS中的节点操作

最新推荐文章于 2022-05-18 08:24:02 发布

爱郑强丽

最新推荐文章于 2022-05-18 08:24:02 发布

阅读量134

点赞数 1

分类专栏： JavaScript 文章标签： JS节点

本文链接：https://blog.csdn.net/ZhiAi_ZhengLiLi/article/details/100049460

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>

爱郑强丽

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS中的节点操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节点操作</title> <script src='jquery-1.8.3.min.js'></script> <style> .wrap...
复制链接

扫一扫