7.1.8 DOM文档的操作

一、插入操作

1.父子之间

1. 1 父元素.appand(子元素) //插入到子集的最后一个元素

　子元素.appandTo(父元素) //appandTo可以链接编程，简化代码

1.2 父元素.prepend(子元素) //插入到子集的第一个元素

　子元素.prependTo(父元素)

2. 兄弟之间

2.1 兄弟元素.after(要插入的元素)

　要插入的元素.insertAfter(兄弟元素)

2.2 兄弟元素.before(要插入的元素)

　要插入的元素.insertBefore(兄弟元素)

二、替换操作

页面中获取中的DOM对象.replaceWith(替换的内容)

如：$('h2').replaceWith('<span>加油吧</span>')

replaceAll()

如: $('<p stype="color:red;">黑girl</p>').replaceAll('span');

三、删除

remove() 删除 //删除节点后事件也会删除删除了整个标签

detach()清空,删除节点后，事件会保留

　　empty() 清空内容

要删除的对象.remove()

四、克隆

副本具有与真身一样的事件处理能力完全克隆
$(this).clone(true).insertAfter($(this));

es6的模板字符串 tab键上面那个反引号

子元素可以是String,jsDOM对象，jquery对象

1） $('.box').append('alex') //可以是普通文件

2） $('.box').append('<h2>alex</h2>') //可以标签+文本

3） //插入一个jsDOM对象

var oP=document.createElement('p');

oP.innerText='女朋友'

$('.box').append(oP)

4）//如果插入的是一个jquery对象相似于移动操作

<div class="wusir">wusir</div>

$('.box').append($('.wusir'))

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>哈哈</span>
		<ul>
			
		</ul>
		<button id="btn">按钮</button>
	</body>
	<script src="jquery-3.2.1.js"></script>
	<script type="text/javascript">
		
		$(function(){
			
			var oLi = document.createElement('li');
			oLi.innerHTML = '路飞';
			
			//追加元素
			$('ul').append('<li><a href="#">luffy</a></li>');
			$('ul').append(oLi);
			//如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
			$('ul').append($('span'));
			
			
			//appendTo()
			
			$('<a href="#">路飞2</a>').appendTo($('ul'));
			
			
//			prepend 插入到被选中的元素的第一个位置
			$('ul').prepend('<li>我是第一个元素</li>')
			$('<li>我是第0个元素</li>').prependTo($('ul'))
			
			
			//after  before
			
			$('ul').after('<h3>我是一个三级标题</h3>');
			
			//insertAfter
			$('<a href="#">第一个</a>').insertAfter($('ul'));
			
			
			$('ul').before('<h2>我是一个二级标题</h2>');
			
			//insertBefore
			
			
			
			
			//复制操作 clone()
			
			$('button').click(function(){
				
				//副本具有与真身一样的事件处理能力 完全克隆
				$(this).clone(true).insertAfter($(this));
				
			})
			
			
			//替换 
			
//			$('h3').replaceWith('<button>替换的按钮</button>');
			
			
//			$('<a href="#">替换超链接</a>').replaceAll('button');
			
			
			
			//删除
			//empty() 只是清空了被选的内容
			
//			$('ul').empty();

//			remove() 被选元素 也被删掉了 事件就没有 什么都没有

//			$('ul').remove();
			
			//detach()  移除匹配的节点元素  删除节点后 事件会保留
			
			var $btn = $('button').detach();	
			console.log($btn[0]);
			
			$('ul').append($btn[0]);
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		})
		
	</script>
</html>

posted @ 2018-09-15 22:43 beallaliu 阅读(109) 评论(0) 收藏举报

刷新页面返回顶部

beallaliu

7.1.8 DOM文档的操作

公告