before()
是个ChildNode
方法,也就是节点方法。节点方法对应于元素方法。区别在于,节点可以直接是文本节点,甚至注释等。但是,元素必须要有HTML标签。
语法如下:
void ChildNode.before((节点或字符串)... 其它更多节点);先来看一个最简单例子,已知HTML如下:
<img id="img" src="mm0.jpg">如果我们希望在图片
<img>
前面插入写文字,直接可以:
document.getElementById('img').before('哈哈哈:');效果会是这样:
哈哈哈:
如果我们插入的是一段HTML字符串,那效果又是怎样的呢?如下:
document.getElementById('img').before('<h1>哈哈哈:</h1>');结果:HTML被转义成安全字符
<h1>哈哈哈:</h1>
可以看出原生DOM的before()
API和jQuery中的before()
API还是有差别的,在jQuery中,before()
的参数值是作为html字符处理的,但是这里的before()
是作为text字符处理的。
如果在图片前面添加HTML字符内容,用兼容更好的insertAdjacentHTML()
DOM方法,如下:
document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>哈哈哈:</strong>');
语法如下:
element.insertAdjacentHTML(position, html);元素DOM的
before()
API还有一个很棒的特性,那就是可以同时插入多个节点内容,例如:
document.getElementById('img').before('1. 哈哈哈', ' ', '2. 哈哈哈');
1.哈哈哈 2.哈哈哈
2. DOM API之after()
after()
和before()
的语法特性兼容性都是一一对应的,差别就在于语义上,一个是在前面插入,一个是在后面插入。