晴明的博客园 GitHub      CodePen      CodeWars     

[js] insertAdjacentHTML demo 

<html>

    <head>
        <meta charset="UTF-8">
        <title>insertAdjacentHTML</title>

    </head>

    <body>

        <div id="paral" style="background:lavender;min-height:100px;border:3px solid black;">
            <div style="color:lightseagreen;background:white;">原本的内容</div>
        </div>

        <button id='bb'>beforeBegin</button>
        <button id='ab'>afterBegin</button>
        <button id='ae'>afterEnd</button>
        <button id='be'>beforeEnd</button>

        <script>
            var paral = document.getElementById("paral"),
                a = document.getElementById("bb"),
                b = document.getElementById("ab"),
                c = document.getElementById("ae"),
                d = document.getElementById("be"),
                an = 1,
                bn = 1,
                cn = 1,
                dn = 1;
            a.addEventListener('click', function() {
                paral.insertAdjacentHTML("beforeBegin", '<div style="background: lawngreen;height:20px;">' + an + '</div>');
                an++;
            });
            b.addEventListener('click', function() {
                paral.insertAdjacentHTML("afterBegin", '<div style="background: lightblue;height:20px;">' + bn + '</div>');
                bn++;
            });
            c.addEventListener('click', function() {
                paral.insertAdjacentHTML("afterEnd", '<div style="background: lemonchiffon;height:20px;">' + cn + '</div>');
                cn++;
            });
            d.addEventListener('click', function() {
                paral.insertAdjacentHTML("beforeEnd", '<div style="background: lightcoral;height:20px;">' + dn + '</div>');
                dn++;
            });
        </script>

    </body>

</html>

 

posted @ 2016-02-17 17:57  晴明桑  阅读(131)  评论(0)    收藏  举报