<!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='htmlpagedom.html'>htmlpagedom.html</a>";
}
function AddThreeLink()
{
var position = document.getElementById("divMain");
var table = document.createElement("table");
var data = {"百度":"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='" + 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://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="相加" onclick="Addvalue()"/><br/>
<input type="text" id="result" readonly="readonly"/>
<div id="divMain"></div>
<input type="button"onclick="AddNewButton()"value="添加新按钮"/><br/>
<input type="button"onclick=" AddNewLink()"value="添加新链接"/><br/>
<input type="button"onclick="AddThreeLink()"value="添加链接表" />
<input type="button" onclick="AddTable()" value="添加新表" />
<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="评论" onclick="WriteComment()"/>
<hr/>
<input type="button" onclick="alert(this.value)"value="click"/>
<!--this 只能应用在本身函数内，不允许在外部函数使用-->
<input type="button" onclick="alert(event.srcElement.value)" value="click" />
</body>
</html>