<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>04dynamicInsert.html</title>

    <script>

        window.onload = function () {

            document.getElementById("butbb").onclick = bb;

            document.getElementById("butab").onclick = ab;

            document.getElementById("butbe").onclick = be;

            document.getElementById("butae").onclick = ae;

        }

 

        //1 <h1 id="h">2 hiiii 3 </hi> 4

        //1BeforeBegin

        //2AfterBegin

        //3BeforeEnd

        //4AfterEnd

       

 

        function bb() {

            document.getElementById("h").insertAdjacentHTML("BeforeBegin", "add BeforeBegin aaaa");

        }

        function ab() {

            document.getElementById("h").insertAdjacentHTML("AfterBegin", "add AfterBegin aaaa");

        }

        function be() {

            document.getElementById("h").insertAdjacentHTML("BeforeEnd", "add BeforeEnd zzzzz");

        }

        function ae() {

            document.getElementById("h").insertAdjacentHTML("AfterEnd", "add AfterEnd zzzzz");

        }

    </script>

</head>

<body>

    <h1 id="h" style="background-color:yellow">this is heading 1</h1>

           <input type="button" id="butbb" value="BeforeBegin" />

           <input type="button" id="butab" value="AfterBegin" />

           <input type="button" id="butbe" value="BeforeEnd" />

           <input type="button" id="butae" value="AfterEnd" />

</body>

</html>

 

arrow
arrow
    全站熱搜

    乙方 發表在 痞客邦 留言(0) 人氣()