先解释清楚节点与元素

元素（element）：页面中所有的标签,每个html标签都是一个元素
节点（node）：页面中所有的内容，包括标签、属性（标签的属性）、文本(文字,换行,空格,回车)) 即使元素也是节点

nodeType:节点的类型:
1----标签
2—属性
3—文本
nodeName:节点的名字:
标签节点—大写的标签名字
属性节点—小写的属性名字
文本节点----#text
nodeValue:节点的值:
标签节点—null
属性节点—属性值
文本节点—文本内容

节点间的层级关系

childNodes获取的是子节点
children获取的是子元素
nextSibling和previousSibling获取的是节点
获取元素对应的是nextElementSibling和previousElementSibling获取的是元素

<p>5</p>
<div>
  <p>1</p>
  <p>2</p>
</div>
<div>3</div>
<script>
  let div = document.querySelector("div")
  div.style.width = "100px"
  div.style.height = "100px"
  let newP = document.createElement("p")
  newP.innerHTML = '4'
  div.appendChild(newP)
  console.log(div.parentNode);
  console.log(div.childNodes);
  console.log(div.children);
  console.log(div.nextSibling);
  console.log(div.nextElementSibling);
  console.log(div.previousSibling);
  console.log(div.previousElementSibling);
  console.log(div.firstChild);
  console.log(div.lastChild);
</script>

nextElementSibling和previousElementSibling有兼容性问题，IE9以后才支持

appendChild()

向节点的子节点列表的末尾添加新的子节点。
参数为要传递的节点

<div>
  <p>123</p>
  <p>123123</p>
</div>
<script>
  let div = document.querySelector("div")
  div.style.width = "100px"
  div.style.height = "100px"
  let newP = document.createElement("p")
  newP.innerHTML = '321'
  div.appendChild(newP)
</script>

insertBefore

在已有的子节点前插入一个新的子节点。
语法：

node.insertBefore(newnode,existingnode)

属性	值
newnode	必需。需要插入的节点对象。
existingnode	可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

<div>
  <p>123</p>
  <p>123123</p>
</div>
<script>
  let div = document.querySelector("div")
  div.style.width = "100px"
  div.style.height = "100px"
  let newP = document.createElement("p")
  newP.innerHTML = '321'
  console.log(div.insertBefore(newP, div.children[0]));
</script>

选要注意的是,它的返回值是插入的节点

cloneNode()

cloneNode() 方法 拷贝所有属性和值。

该方法将复制并返回调用它的节点的副本。

如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。

否则（也就是默认值，或者false），它只复制当前节点。

<div>
  <p>123</p>
  <p>123123</p>
</div>
<script>
  let div = document.querySelector("div")
  div.style.width = "100px"
  div.style.height = "100px"
  let cloneDiv = div.cloneNode(true)
  document.body.appendChild(cloneDiv)
</script>

下面只是将他的参数更改为 false
效果就是设置为false属性时，会将div节点复制，并不会去复制其后代p：

<div>
  <p>123</p>
  <p>123123</p>
</div>
<script>
  let div = document.querySelector("div")
  div.style.width = "100px"
  div.style.height = "100px"
  let cloneDiv = div.cloneNode(false)
  document.body.appendChild(cloneDiv)
</script>