首页 > 代码库 > DOM动态增加控件
DOM动态增加控件
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>加法计算器</title> <script type="text/javascript"> function Addvalue() { var txt1 = document.getElementById("text1").value; var txt2 = document.getElementById("text2").value; var txt3 = parseInt(txt2,10) + parseInt(txt1,10); var input = document.getElementById("result"); input.value = txt3; } function AddNewButton() { var position = document.getElementById("divMain"); var input = document.createElement("input"); input.value = "动态增加的按钮"; input.type = "button"; input.onclick = AddNewButton; position.appendChild(input); } function AddNewLink() { var position = document.getElementById("divMain"); position.innerHTML = "<a href=http://www.mamicode.com/‘htmlpagedom.html‘>htmlpagedom.html"; } function AddThreeLink() { var position = document.getElementById("divMain"); var table = document.createElement("table"); var data = http://www.mamicode.com/{"百度":"http://baidu.com","新浪":"http://xinlang.cn","网易":"http://wangyi.com"}; var tr = document.createElement("tr"); for (var key in data) { var td = document.createElement("td"); td.innerHTML = "<a href=http://www.mamicode.com/‘" + data[key] + "‘>" + key + "</a>"; tr.appendChild(td); } table.appendChild(tr); position.appendChild(table); } function AddTable() { var position = document.getElementById("divMain"); var table = document.createElement("table"); var data = http://www.mamicode.com/{"百度": "http://baidu.com", "新浪": "http://xinlang.cn", "网易": "http://wangyi.com" }; for(var key in data) { var tr =table.insertRow(-1); var td1 = tr.insertCell(-1); var td2 = tr.insertCell(-1); td1.innerText = key; td2.innerText = data[key]; //tr.appendChild(td1); //tr.appendChild(td2); //table.appendChild(tr); } position.appendChild(table); } var WriteComment=function()//将textarea里的内容传进来 { var table = document.getElementById("comment"); var input = document.getElementById("nickname").value; var text = document.getElementById("commentplace").value; var tr = document.createElement("tr"); var td1 = tr.insertCell(-1); var td2 = tr.insertCell(-1); td1.innerText = input; td2.innerText = text; table.tBodies[0].appendChild(tr); } </script></head><body> <input type="text" id="text1" /><br/> <input type="text" id="text2" /><br/> <input type="button" value="http://www.mamicode.com/相加" onclick="Addvalue()"/><br/> <input type="text" id="result" readonly="readonly"/> <div id="divMain"></div> <input type="button"onclick="AddNewButton()"value="http://www.mamicode.com/添加新按钮"/><br/> <input type="button"onclick=" AddNewLink()"value="http://www.mamicode.com/添加新链接"/><br/> <input type="button"onclick="AddThreeLink()"value="http://www.mamicode.com/添加链接表" /> <input type="button" onclick="AddTable()" value="http://www.mamicode.com/添加新表" /> <table id="comment"> <thead> <td>猫猫：</td><td>这里有沙发快点抢啊！</td> </thead> <tbody> </tbody> </table> <font>昵称</font><input type="text" id="nickname"/> <font>评论</font><br/><textarea id="commentplace"> </textarea> <input type="button"value="http://www.mamicode.com/评论" onclick="WriteComment()"/> <hr/> <input type="button" onclick="alert(this.value)"value="http://www.mamicode.com/click"/> <!--this 只能应用在本身函数内，不允许在外部函数使用--> <input type="button" onclick="alert(event.srcElement.value)" value="http://www.mamicode.com/click" /></body></html>
DOM动态增加控件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。