<body>
**jquery的节点操作
创建节点 原生js里面操作是createElement()
插入节点 原生js里面操作是appendChild()
删除接单 原生js里面操作是removeChild()
替换节点 原生js里面操作是replaceChild()
克隆节点 原生js里面操作是cloneChild()**
<div style='width:200px;height: 200px;background-color:blueviolet;'>
<p style='background: red;'>div里面的p 颜色是红色</p>
</div>
<li>这个是li</li>
<script src='./jquery.min.js'></script>
<script type="text/javascript">
//1 jQuery创建节点，只有一个方法
// $();在()里面传递一个html格式的文本的时候，就是创建节点
// 当在()里面传递选择器的时候就是获取元素。
$('<div>内容自己写就好了</div>')
console.log($('<div>内容自己写就好了</div>'))
</script>
<script>
// 2 内部插入(父子关系)
// 2-1 append() 在。。末尾
// 页面元素.append(要插入的元素)--放在页面元素的子元素位置，放在末尾
var $span=$('<span>这是内部的加点span</span>')
$('div').append($span)
// 2-2 appendTo()
// 要插入的元素.appendTo(页面元素)
var $span=$('<span></br>又添加的span</span>')
$span.appendTo($('div'))
// 2-3 prepend() 在。。。最前
// 页面元素.prepend(要插入的元素)--放在页面元素的子元素位置，放在最前
$('div').prepend($span)
// 2-4 prependTo()
// 要插入的元素.prependTo(页面元素)
$span.prependTo($('div'))
//外部插入（兄弟关系）
// 3-1 after() 在...之后
// 页面元素.after(要插入的元素)--放在页面元素的下一个兄弟元素位置
$('div').after($span)
// 3-2 insertAfter()
// 要插入的元素.insertAfter(页面元素)
$span.insertAfter($('div'))
// 3-3 before() 在。。之前
// 页面元素.before(要插入的元素)--放在页面元素的上一个兄弟元素位置
$('div').before($span)
// 3-4 insertBefore()
// 要插入的元素.(页面元素)
$span.insertBefore($('div'))
</script>
<script type="text/javascript">
//3 删除节点
// 3-1 empty() 空 不传参数
// 页面元素.empty() --把页面元素变成一个空标签，所有的子元素都删除
// $('div').empty() //里面的元素也会消失
// 3-2 remove() 移除
// 页面元素.remove() 把自己从页面移除
$('p').remove()
</script>
<script type="text/javascript">
//4 替换节点 把页面中的节点替换成一个其他节点
//4-1 replaceWith()
// 页面元素.replaceWith(替换元素) --用替换元素把页面元素替换掉,有多少换多少。
$('div').replaceWith($span)
// 4-2 replaceAll()
// 替换元素.replaceAll(页面元素)
// $span.replaceAll($('div'))
</script>
<script type="text/javascript">
// 5 克隆节点，复制一份一模一样的元素
// clone()
// 页面元素.clone() --返回的是克隆好的节点
var li = $('li').clone()
$('li').after(li)
// clone (布尔值，布尔值) true/false 不传默认是false
// 第一个参数：默认false，表示是否克隆元素的事件。 第一个参数为true的时候，第二个参数的设置才有意义。
// 第二个参数：默认跟随第一个，表示是否克隆子节点的事件
</script>
