JavaScript节点

1.创建节点

创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点在这里插入代码片
创建方法：

document.createElement('标签名')

2.追加节点

想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子节点：

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

父元素.insertBefore(要插入的元素，在那个元素前面)

    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是li'
    ul.appendChild(li)

    //3.追加节点 
    //insertBefore(插入的元素，放到哪个元素的前面)
    ul.insertBefore(li,ul.children[0])

3.克隆节点

特殊情况下，我们新增节点，按照如下操作：
复制一个原有的节点
把复制的节点放入到指定的元素内部
克隆节点

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        //1.克隆节点 元素.cloneNode(true)
        const li1 = ul.children[0].cloneNode(true)
        //2.追加
        ul.appendChild(li1)
    </script>

4.删除节点

目标：能够具备根据需求删除节点的能力
若一个节点在页面中已不需要时，可以删除它
在javascript原生DOM操作中，要删除元素必须通过父元素删除

语法：

父元素.removeChild(要删除的元素)

注：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在，删除则从html中删除节点

  <ul>
      <li>没用了</li>
  </ul>
  <script>
      const ul = document.querySelector('ul')
      ul.removeChild(ul.children[0])
  </script>