介紹的這個方法是：insetAdjacentHTML() 方法

此方法接收兩個引數：

第一個引數必為下列值：

beforebegin：在呼叫的元素外部的前面新增一個目標元素

afterend：在呼叫元素外部的後面新增一個目標元素

afterbegin：在呼叫元素的內部第一個子元素前面新增一個目標元素

beforeend：在呼叫元素的內部最後一個子元素後面新增一個目標元素

程式碼如下

var div2 = document.querySelector("#div2");
  div2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//在呼叫元素外部前面新增一個元素
  div2.insertAdjacentHTML("afterbegin","<p>hello world</p>");//在呼叫元素的內部新增一個子元素並取代了第一個子元素
  div2.insertAdjacentHTML("beforeend","<p>hello world</p>");//在呼叫元素內部後面新增一個子元素 即取代了最後的子元素
  div2.insertAdjacentHTML("afterend","<p>hello world</p>");//在呼叫元素的外部後面新增一個元素

瀏覽器的渲染的效果：

而且此方法是ie 的最早的方法所以相容性特別好