先来对比对比JS 和 JQ 的节点操作：
+ 原生 JS 的节点操作
=> 创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
+ jQuery 的节点操作
=> 创建节点, 插入节点, 删除节点, 替换节点, 克隆节点
！这里用$选择的元素 都有隐式迭代 都会执行插入、替换、删除的啊... 如果不想这样 那你就精准定位啊！
1. 创建节点
语法： $(html结构字符串)
=> 当 $() 里面传递一个选择器的时候, 就是获取元素
=> 当 $() 里面传递一个 html 结构字符串的时候, 就是创建元素节点
=> 当 $() 里面传递一个 DOM 元素节点的时候, 就是转换成 jQuery 元素结合 (DOM 元素由JS的语法获取 )
2. 插入节点
内部插入(父子关系的插入)
2-1. append()
=> 语法: 父元素.append(子元素)
=> 把子元素插入到父元素内部, 放在末尾的位置
2-2. appendTo()
=> 语法: 子元素.appendTo(父元素)
=> 把子元素插入到父元素内部, 放在末尾的位置
2.1和2.2用法一样 但语法不一样而已 因为是链式编程 所以呢 会大大提高我们编程的灵活性
2-3. prepend()
=> 语法: 父元素.prepend(子元素)
=> 把子元素插入到父元素, 放在最前面的位置
2-4. prependTo()
=> 语法: 子元素.prependTo(父元素)
=> 把子元素插入到父元素, 放在最前面的位置
2.3和2.4用法一样 但语法不一样而已 因为是链式编程 所以呢 会大大提高我们编程的灵活性
外部插入(兄弟关系的插入)
2-5. after()
=> 语法: 存在元素.after(插入元素)
=> 把插入元素排在存在元素的后面, 以兄弟关系出现
2-6. insertAfter()
=> 语法: 插入元素.insertAfter(存在元素)
=> 把插入元素排在存在元素的后面, 以兄弟关系出现
2.5 和 2.6 的用法也一样 但是语法不一样-----
2-7. before()
=> 语法: 存在元素.before(插入元素)
=> 把插入元素排在存在元素的前面, 以兄弟关系出现
2-8. insertBefore()
=> 语法: 插入元素.insertBefore(存在元素)
=> 把插入元素排在存在元素的前面, 以兄弟关系出现
2.5 和 2.6 的用法也一样 但是语法不一样-----
插入节点没什么 主要注意一点 如果有一个节点 p 你吧它插入到xx前面 又把它插入到xxx 后面的时候 它会以最后一个为准 ，因为他这些插入移动是按照 地址来的 好比和复制不是一个意思 而是移动.
3. 删除节点
3-1. remove()
=> 语法: 元素集合.remove()
=> 把自己从自己的父元素里面移出 如果自己是父元素 子元素全删
3-2. empty()
=> 语法: 元素集合.empty()
=> 把自己变成空标签, 把所有后代节点全部移除（就是把全部东西移走 删除） 但是源代码还存在自己 但是页面上看不见自己 如果自己是父元素 即 除了自己的源代码可见 子元素全部删除(和 remove 一样)
4. 替换节点
4-1. replaceWith()
=> 语法: 换下节点.replaceWith(换上节点)
换句话讲： 旧节点.replaceWith(新节点)
-----------------------------------------------------------------------
4-2. replaceAll()
=> 语法: 换上节点.replaceAll(换下节点)
换句话讲： 新节点.replaceAll(旧节点)
这玩意也是一样啊 功能是一样的 娘嫩 语法不一样、
替换节点非常注意隐式迭代啊！！！ 而且！！！ 换上节点会在原位置消失（剪切） 类似于剪切覆盖！！！ 就是所谓的 新节点. 那么旧节点就会被删除.
5. 克隆节点
5-1. clone()
=> 语法: 元素集合.clone() //两个参数
=> 必然携带所有节点过来
=> 第一个参数默认是 false, 表示是否克隆元素本身的事件, 选填 true
=> 第二个参数默认是 跟随第一个, 表示是否克隆元素后代节点的事件, 选填
=> 注意: 当第一个参数是 false 的时候, 第二个参数没有意义 （反正没意义就是没意义 ， 因为第二参数默认跟随第一参数 但 参1为假 参二无论如何都为假啊！）