javascript中createElement的两种创建方式

这篇文章主要介绍了javascript中createElement的两种创建方式,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript中createElement的两种创建方式。分享给大家供大家参考。具体实现方法如下：

1. <html xmlns="http://www.w3.org/1999/xhtml"> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>CreateElement的两种创建方式</title> 
5. <script type="text/javascript"> 
6. function CreateButton1() { 
7. var btn = document.createElement("input"); 
8. btn.type = "button"; 
9. btn.value = "我是动态创建的1"; 
10. btn.onclick = function () { 
11. alert(this.value); 
12. } 
13. document.body.appendChild(btn); 
14. } 
15. function CreateButton2() { 
16. var btn = document.createElement("<input type='button' value='我是动态创建的2' "+"onclick='OnClick2(this)' />"); 
17. document.body.appendChild(btn); 
18. } 
19. function OnClick2(btn) { 
20. alert(btn.value); 
21. } 
22. function CreateLink() { 
23. var link = document.createElement("<a href='http://www.baidu.com'>百度</a>"); 
24. //注意这里链接的文本“百度”是不会显示出来的， 
25. //必须设置innerText或innerHTML 
26. link.innerText = "百度"; 
27. document.body.appendChild(link); 
28. } 
29. function CreateLabel() { 
30. var lbl = document.createElement("label"); 
31. lbl.setAttribute("for", "userName"); 
32. lbl.setAttribute("myAge", "12"); 
33. //可以设置自定义标示 
34. lbl.innerText = "用户名:"; 
35. document.body.appendChild(lbl); 
36. } 
37. </script> 
38. </head> 
39. <body> 
40. <input type="button" value="动态创建按钮1" onclick="CreateButton1()" /> 
41. <input type="button" value="动态创建按钮2" onclick="CreateButton2()" /> 
42. <input type="button" value="动态创建链接" onclick="CreateLink()" /> 
43. <input type="button" value="动态创建Label" onclick="CreateLabel()" /> 
44. <input type="text" id="userName" value="李莫" /> 
45. </body> 
46. </html> 

希望本文所述对大家的javascript程序设计有所帮助。