在元素外插入一个元素

浅浅的花香味﹌ 2021-10-24 05:58 387阅读 0赞

eg：document.body.insertAdjacentHTML("afterend","hello world");

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4OTkyNTI4_size_16_color_FFFFFF_t_70][]

介绍的这个方法是：insetAdjacentHTML() 方法

此方法接收两个参数：

第一个参数必为下列值：

beforebegin：在调用的元素外部的前面添加一个目标元素

afterend：在调用元素外部的后面添加一个目标元素

afterbegin：在调用元素的内部第一个子元素前面添加一个目标元素

beforeend：在调用元素的内部最后一个子元素后面添加一个目标元素

代码如下

var div2 = document.querySelector("#div2");
 div2.insertAdjacentHTML("beforebegin","hello world");//在调用元素外部前面添加一个元素
 div2.insertAdjacentHTML("afterbegin","hello world");//在调用元素的内部添加一个子元素并取代了第一个子元素
 div2.insertAdjacentHTML("beforeend","hello world");//在调用元素内部后面添加一个子元素 即取代了最后的子元素
 div2.insertAdjacentHTML("afterend","hello world");//在调用元素的外部后面添加一个元素

浏览器的渲染的效果：

![aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTkxNjc5LzIwMTcwMi85OTE2NzktMjAxNzAyMDUxMjE3MDI3MjktMTE1MjczNDgzMC5wbmc][]

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

jq类似：

jQuery append() 方法在被选元素（内部）的结尾插入内容。  
jQuery prepend() 方法在被选元素（内部）的开头插入内容。  
jQuery after() 方法在被选元素（外部）之后插入内容。  
jQuery before() 方法在被选元素（外部）之前插入内容。  
举例说明：  
当向div元素添加一个p元素时，使用append()方法即在div元素内部添加了一个子元素位于它的尾部。  
而使用after方法时则是在外边添加元素。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4OTkyNTI4_size_16_color_FFFFFF_t_70]: /images/20211023/d7beae07c296499eb0c4637dac5d5051.png
[aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTkxNjc5LzIwMTcwMi85OTE2NzktMjAxNzAyMDUxMjE3MDI3MjktMTE1MjczNDgzMC5wbmc]: /images/20211023/9873856cd578432fa4f7e2d963aca946.png