DOM的动态创建

•document.write只能在页面加载过程中才能动态创建。
•可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下
       function showit() {
            var divMain = document.getElementById("divMain");
           //创建完对象后，对象作为返回值返回
            var btn = document.createElement(“input”);//创建一个input对象
            btn.type = "button";
            btn.value = "我是动态的！";
            btn.onclick = btnClick;
            divMain.appendChild(btn);//将新建的元素添加到id为divMain层中
        }
   function btnClick(){ alert(“我是新来的”)；}
<div id="divMain">   </div>
<input type="button" value="ok" onclick="showit()" />
 
动态创建元素实例：
View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6         function createBtn() {
 7             var btn = document.createElement("input");
 8             btn.type = "button";
 9             btn.value = "新按钮";
10             btn.onclick = function() {
11                 alert("我是新来的");
12             }
13             var d = document.getElementById("d1");
14             d.appendChild(btn);
15         }
16 
17         function createLink() {
18             var link = document.createElement("a");
19             link.href = "http://www.baidu.com";
20             link.innerText = "百度";
21             link.target = "_blank";
22 
23             var d = document.getElementById("d1");
24             d.appendChild(link);
25         }
26         
27         function btnClick(){
28             alert("我是新来的");
29         }
30     </script>
31 </head>
32 <body>
33     <input type="button" value="创建按钮" onclick="createBtn()" />
34     <input type="button" value="创建超链接" onclick="createLink()" />
35     <div id="d1">abc</div>
36 </body>
37 </html>

 

 
posted @ 2013-03-24 11:29  Big.Eagle  阅读(134)  评论(0)    收藏  举报