1、插入Element
在js中,最常用的插入Element方法有appendChild
和insertBefore
,用法为:
- // appendChild
- // parentElement.appendChild(childElement);
- var oBody = document.querySelector("body");
- var oA = document.createElement("a");
- oA.href = "1.html";
- oA.innerHTML = "hello world!";
- oBody.appendChild(oA);
-
- // insertBefore
- // parentElement.insertBefore(childElement, positionElement);
- var oB = document.createElement("b");
- oB.style.color = "red";
- oB.innerText = 'bbbbb';
- oBody.insertBefore(oB, oA);
appendChild
:在父级元素内追加新元素。
insertBefore
:在父级元素内的某个元素之前插入新元素。
在执行上述代码之后,页面的代码为:
- <body>
- <b style="color: red;">bbbbb</b>
- <a href="1.html">hello world!</a>
- </body>
由appendChild
和insertBefore
能够扩展出如prependChild
、insertAfter
等函数,最著名的jquery就是这么做的,相关操作DOM方法有:
- $().append();
- $().prepend();
- $().before();
- $().after();
- $().appendTo();
- $().prependTo();
- $().insertBefore();
- $().insertAfter();
jquery的这些方法,都可以接收元素对象、或者是HTML字符串,非常的方便。而js原生的appendChild
和insertBefore
只能接收元素对象,每次要插入新的元素,都要执行document.createElement
方法,非常的复杂。
2、insertAdjacentHTML
insertAdjacentHTML解决了上述的不便,它的作用比appendChild和insertBefore强大,语法格式为:
- element.insertAdjacentHTML(position, text);
position可以取4个值:
beforebegin
:在元素的开始位置之前插入。beforeend
:在元素的结束位置之前插入。afterbegin
:在元素的开始位置之后插入。afterend
:在元素的结束位置之后插入。
元素的位置参考示意图:
兼容性为:
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 | 8.0 (8.0) | 4.0 | 7.0 | 4.0 (527) |
第1例说的appendChild
和insertBefore
,可以改写为:
- // appendChild
- // parentElement.insertAdjacentHTML("beforeend", text);
- var oBody = document.querySelector("body");
- oBody.insertAdjacentHTML('beforeend', '<a id="js-a" href="1.html">hello world!</a>');
-
- // insertBefore
- // parentElement.insertAdjacentHTML("beforebegin", text);
- var oA = document.querySelector("#js-a");
- oA.insertAdjacentHTML("beforebegin", "<b style='color:#f00;'>bbbbb</b>");
关于insertAdjacent...的方法还有insertAdjacentElement和insertAdjacentText,其作用显而易见:
insertAdjacentElement
:插入DOM对象。insertAdjacentText
:插入纯文本。
三个方法合起来就和jquery操作DOM的方法类似了。