元素对象的insertAdjacentElement()方法

使用就是给Html元素进行添加操作，insertAdjacentElement();方法是个不错的选择。其基本结构为：
对象.insertAdjacentElement(参数1，参数2)

• 对象：是直已经在页面中存在的HTML元素，以此为位置坐标点插入新对象；
• 参数1：是插入操作的位置，有4个值
  • beforeBegin：对象的开始标签之前
  • afterBegin：对象的开始标签之后
  • beforeEnd：对象的结束标签之前
  • afterEnd：对象的结束标签之后
• 参数2：已经创建的待插入对象。

一个简单人实例：

• html
  ```html

- css
```css

操作前的效果：

• javascritp

  // 获取插入结点,并对结点进行样式设计
      const insert = document.querySelector(".insert");
      insert.style.backgroundColor = "red";
      insert.style.color = "blue";
      insert.style.fontSize = "20px";
      insert.style.padding = "20px";

插入操作

      // beforeBegin：对象的开始标签之前
      const bBegin = document.createElement("div");
      bBegin.textContent = "BeforBegin";
      insert.insertAdjacentElement("beforeBegin", bBegin);
      // - afterBegin：对象的开始标签之后
      const aBegin = document.createElement("div");
      aBegin.textContent = "AfterBegin";
      insert.insertAdjacentElement("afterBegin", aBegin);
      // - beforeEnd：对象的结束标签之前
      const bEnd = document.createElement("div");
      bEnd.textContent = "BeforEnd";
      insert.insertAdjacentElement("beforeEnd", bEnd);
      // - afterEnd：对象的结束标签之后
      const aEnd = document.createElement("div");
      aEnd.textContent = "AfterEnd";
      insert.insertAdjacentElement("AfterEnd", aEnd);

效果