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