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>
DOM操作----动态创建网页新元素

推荐阅读更多精彩内容
