eg:document.body.insertAdjacentHTML("afterend","<p>hello world</p>");
介绍的这个方法是: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 的最早的方法所以兼容性特别好
jq类似:
jQuery append() 方法在被选元素(内部)的结尾插入内容。
jQuery prepend() 方法在被选元素(内部)的开头插入内容。
jQuery after() 方法在被选元素(外部)之后插入内容。
jQuery before() 方法在被选元素(外部)之前插入内容。
举例说明:
当向div元素添加一个p元素时,使用append()方法即在div元素内部添加了一个子元素位于它的尾部。
而使用after方法时则是在外边添加元素。