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>
