js before、after方法

ES6新增的before、after、prepend、append方法类似于jQuery的before、after、prepend、append方法，只不过不用再引入jQuery这么大的库了，可以看出JS也在越来越简化DOM操作。

before()
 
before()是个ChildNode方法，也就是节点方法。因此，before()的参数既可以是DOM元素，也可以是DOM节点，甚至可以直接字符内容。它将在调用此方法的前面插入内容。

语法：

void ChildNode.before((节点或字符串)... 其它更多节点);

注：节点方法对应于元素方法。区别在于，节点可以直接是文本节点，甚至注释等。但是，元素必须要有HTML标签。

案例1插入DOM节点：

<img  id="images" src="detail.jpg" alt="">
<p><button id="beforeText">图片前面插入文字“美女：”</button></p>

<script>
//插入节点的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
    var eleTitle=document.createElement('h1');
     eleTitle.innerHTML='美女';
      eleImg.before(eleTitle);
});
</script>

最终效果如下：


案例2插入文本节点：

<img  id="images" src="detail.jpg" alt="">
<p><button id="beforeText">图片前面插入文字“美女：”</button></p>
 
<script>
//插入节点的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
    eleImg.before("我是文字");
});
</script>

最终效果如下：


案例3插入HTML字符串：

<img  id="images" src="detail.jpg" alt="">
<p><button id="beforeText">图片前面插入文字“美女：”</button></p>

<script>
//插入节点的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
    eleImg.before('<strong>美女：</strong>');
});
</script>

最终效果如下：


可以看到，before方法并不支持插入html字符串。html字符串会被转义。如果非要插入html字符串，可以使用insertAdjacentHTML：

document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>美女：</strong>');

语法如下：

element.insertAdjacentHTML(position, html);

例子：

<script>
function myfun(){
    var obj = document.getElementById("btn1");
    obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
}
</script>

<input name="txt">
<input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()"> 

after()
after除了在后面插入之外，用法和before一模一样。就不再赘述。同样prepend、append也可以自己去尝试。