动态创建元素

来源：互联网发布：域名到期时间查询编辑：程序博客网时间：2024/06/01 10:37

<head>
<title>新学期欢迎新同学</title>
<script type="text/javascript">
function showit(){
var divMain=document.getElementById("divMain");

var btn=document.createElement("input");
btn.type="button";
btn.value="我是动态的";

divMain.appendChild(btn);

}

</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()"/>
</body>

还可以使用innerText和innerHtml
<head>
<title></title>
<script type="text/javascript">
function showit(){
var divMain=document.getElementById("divMain");
divMain.innerHTML = "<a href ='http://www.rupeng.com'>123</a>";}

</script>
</head>
<body>
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()"/>
</body>
练习：点击按钮添加超链接
<head>
<title></title>
<script type="text/javascript">
function loadData()
{
var data={"百度":"http://www.baidu.com",
"新浪":"http://www.sina.com",
"传智博客":"http://www.itcast.cn"};
var tablelinks=document.getElementById("tablelinks");
for(var key in data)
{
var value=data[key];

//document.write(key);
//document.write(value);

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);
tablelinks.tBodies[0].appendChild(tr);
}
}
</script>
</head>
<body>
<table id="tablelinks"> </table>
<input type="button" value="加载数据" onclick="loadData()"/>
</body>

另一种方法
function loadData()
{
var data={"百度":"http://www.baidu.com",
"新浪":"http://www.sina.com",
"传智博客":"http://www.itcast.cn"};
var tableLink = document.getElementById("tablelinks");
for (var key in data){
var value = data[key];
var tr = tableLink.insertRow(-1); //firefox里面需要-1这个参数插入一行并返回插入的对象
var td1 = tr.insertCell(-1);
td1.innerText = key; //firefox下不支持innerText
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='"+value+"'>"+value+"</a>"; //也可以使用createElement
}

}

练习：无刷新的评论效果
<head>
<script type="text/javascript">
function AddComment(){
var nickname = document.getElementById("nickname").value;
var comment = document.getElementById("comment").value;

var tableComment = document.getElementById("tableComment");

var tr = document.createElement("tr");

var tdNickName = document.createElement("td");
tdNickName.innerText = nickname;
tr.appendChild(tdNickName);

var tdComment = document.createElement("td");
tdComment.innerText = comment;
tr.appendChild(tdComment);

tableComment.tBodies[0].appendChild(tr); //tBody是考虑兼容性问题
}
</script>
<head>
<body>
<table id="tableComment">
<tbody>
</tbody>
</table>
昵称：<input id="nickname" type="text" /><br />
<textarea id="comment"></textarea><br />
<input type="button" value="评论" onclick="AddComment()" />
</body>

0 0