JavaScript的 insertAdjacentHTML API

2017-11-30

JavaScript的 insertAdjacentHTML API 实现jQuery中的 append() prepend()等相同效果

element.insertAdjacentHTML(position, text);
beforeBegin：在该元素前插入
afterBegin：在该元素第一个子元素前插入
beforeEnd：在该元素最后一个子元素后面插入
afterEnd：在该元素后插入

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <p class="text">我是文本</p>
    <input id="beforeBegin"  type="button" value="beforeBegin">
    <input id="afterBegin"  type="button" value="afterBegin">
    <input id="beforeEnd"  type="button" value="beforeEnd">
    <input id="afterEnd"  type="button" value="afterEnd">
</div>
</body>
<script>
    var  a = document.querySelector('#beforeBegin');
    var  b= document.querySelector('#afterBegin');
    var  c = document.querySelector('#beforeEnd');
    var  d = document.querySelector('#afterEnd');
    var  oText = document.querySelector('.text');
    a.onclick = function(){
        oText.insertAdjacentHTML("beforeBegin",
        "<p>beforeBegin：在对象之前；jQuery的before()<p/>");
    };
    b.onclick = function(){
        oText.insertAdjacentHTML("afterBegin",
        "<p>afterBegin：在对象内容之前；jQuery的prepend()<p/>");
    };
    c.onclick = function(){
        oText.insertAdjacentHTML("beforeEnd",
        "<p>beforeEnd：在对象内容之后； 相当于jQuery的append()<p/>");
    };
    d.onclick = function(){
        oText.insertAdjacentHTML("afterEnd",
        "<p>afterEnd：在对象之后； 相当也jQuery 的after()<p/>");
    };
</script>
</html>