十五的学习日记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);  
        };  
    };  
})();