document.createElement(“tagName”)

    doucment.creatElement()方法创建由tagName指定的HTML元素。
    因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点


    node指的是父级，child指的是子级

    1，node.appendChild(child)

    node.appendChild()方法将一个节点添加到指定父节点的子节点列表某尾。
    类似于CSS3里面的after伪数组。

    1. <!DOCTYPE html>
    2. <html>
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <title></title>
    7.     </head>
    9.     <body>
    11.         <ul>
    12.             <li>123</li>
    13.             <li>456</li>
    14.         </ul>
    16.     </body>
    18.     <script>
    19.         //1，创建一个元素节点，节点元素的类型为li，节点的名字叫li
    20.         var li=document.createElement("li");
    22.         //2，添加节点 ，node是父级，child是子级
    23.         var ul=document.querySelector("ul");//先获取父元素
    24.         ul.appendChild(li);//添加至末尾
    25.     </script>
    27. </html>

    2，node.insertBefore(child,指定元素)

    node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。
    类似于CSS3里面的before伪数组。**

    1. <!DOCTYPE html>
    2. <html>
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <title></title>
    7.     </head>
    9.     <body>
    11.         <ul>
    12.             <li>123</li>
    13.             <li>456</li>
    14.             <li class="fuck">789</li>
    15.         </ul>
    17.     </body>
    19.     <script>
    20.         //1，创建一个元素节点，节点的名字叫li
    21.         var li=document.createElement("li");
    23.         //2，添加节点 ，node是父级，child是子级
    24.         var ul=document.querySelector("ul");//先获取父元素
    25.         var fuck=document.querySelector(".fuck");//先获取指定的子元素
    26.         ul.insertBefore(li,fuck);//添加至指定子节点的前面
    27.     </script>
    29. </html>