本文共 1417 字,大约阅读时间需要 4 分钟。
比较好玩的动态添加网页元素
javascript 有一些很有趣的功能。下面介绍三样小功能。
1.动态创建按键
2动态创建链接
3动态创建表格
效果如下:
源代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head> <title></title> <script type="text/javascript"> function btnClick() { var divMain = document.getElementById('divMain'); var input = document.createElement("input"); input.type = "button"; input.value = "我是动态按钮"; divMain.appendChild(input); } function linkCreate() { var divlink = document.getElementById("divlink"); var link = document.createElement("a"); link.href = ""; link.innerText = "百度"; divlink.appendChild(link); } function tableCreate() { var data = { "google":"","搜狐":"","百度":"" } var tablediv = document.getElementById("tablediv"); for (var key in data) { var value = data[key]; var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerText = key; tr.appendChild(td1); var td2 = document.createElement("td"); td2.innerHTML = "<a href='" + value + "'>"+value+"</a>"; tr.appendChild(td2); tablediv.appendChild(tr); } } </script> </head> <body> <form id="form1" runat="server"> <div id="divMain"> </div> <div id="divlink"> </div> <div id="tablediv"> </div> <input id="Button1" type="button" value="动态创建按钮" id="Button2" type="button" value="动态创建链接" /><input id="Button3" type="button" value="创建一个链接的表格" /> </form> </body> </html>本文转自gauyanm 51CTO博客,原文链接:http://blog.51cto.com/gauyanm/422284,如需转载请自行联系原作者