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