【筆記】js原生方法 在元素外部或內部實現添加元素功能（類似jq 的 insert 和 append）

介紹的這個方法是：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 的最早的方法所以兼容性特別好

兼容瀏覽器：IE    FireFox 8+  safari   opera   chrome