DOM操作----動態創建網頁新元素

<!DOCTYPE html>
<html>
<head>
    <title>動態創建網頁新元素</title>
    <script type="text/javascript">
        function newObj(){
            var box1=document.getElementById('box1');
            box1.innerHTML="<span>呵，女人！</span>"
            var box2=document.getElementById('box2');
            var span1=document.createElement('span');
            var span2=document.createElement('span');
            span1.innerHTML="呵，男人！";
            span2.appendChild(document.createTextNode("呵，死人妖！"));
            box2.appendChild(span1);
            box3.appendChild(span2);
        }
        var count=0;
        function beng(){
            count++;
            var monkey=document.createElement('h1');
            var str="喲！大猴呀~"+count;
            monkey.innerHTML=str;
            document.getElementById('box4').appendChild(monkey);
        }
    </script>
</head>
<body>
<input type="button" value="女媧造人" onclick="newObj()">
<input type="button" value="石頭蹦！" onclick="beng()">
<p id="box1"></p>
<p id="box2"></p>
<p id="box3"></p>
<p id="box4"></p>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容