十五的學習日記20161001-insertAdjacentHTML與insertAdjacentText

十五的學習日記20161001

JavaScript

insertAdjacentHTML和insertAdjacentText

當咱們使用insertAdjacentHTML，只需下面一行代碼就能夠；
  
  `document.querySelector('ul').insertAdjacentHTML("beforeend", '<li>內容</li>');01.`
  
  而且還提供了多個地方插入文本。

beforebegin  //在 element 元素的前面。  
      afterbegin   //在 element 元素的第一個子元素前面。  
      beforeend    //在 element 元素的最後一個子元素後面。  
      afterend     //在 element 元素的後面。

以上兩個方法，第二個參數都必須是字符串，假如已經有dom節點或者已經createElement出來了一個元素，須要插入怎麼辦？還有一個叫作 insertAdjacentElement ，
使用方法相同，第二參數能夠是create出來的節點獲取其餘dom元素。

var _dom = document.createElement('p');  
_dom.innerHTML = '測試';  
element.insertAdjacentElement("beforeend", _dom);01.
var _dom = document.querySelector('.ele');  
element.insertAdjacentElement("beforeend", _dom );   01.

須要注意的是，insertAdjacentHTML是插入文本會解析html標籤，insertAdjacentText不會解析html標籤，可是火狐不支持這個insertAdjacentText，不過咱們能夠作下兼容。以下代碼；
另外insertAdjacentElement在火狐中也不支持，一樣使用下面的兼容代碼

(function(){  
    if(!!window.sidebar && HTMLElement.prototype.insertAdjacentText == undefined) {  
        HTMLElement.prototype.insertAdjacentElement = function(where, node) {  
            switch (where) {  
                case "beforebegin":  
                    this.parentNode.insertBefore(node, this);break;  
                case "afterbegin":  
                    this.insertBefore(node, this.firstChild);break;  
                case "beforeend":  
                    this.appendChild(node);break;  
                case "afterend":  
                    if (this.nextSibling)  
                        this.parentNode.insertBefore(node, this.nextSibling);  
                    else  
                        this.parentNode.appendChild(node);  
                    break;  
            };  
        };  
        HTMLElement.prototype.insertAdjacentText = function(where, txt) {  
            var parsedText = document.createTextNode(txt);  
            this.insertAdjacentElement(where, parsedText);  
        };  
    };  
})();