动态创建元素

最新推荐文章于 2021-05-14 11:40:14 发布

after tomorrow

最新推荐文章于 2021-05-14 11:40:14 发布

阅读量230

点赞数

分类专栏： javascript

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<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" οnclick="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" οnclick="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="加载数据" οnclick="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="评论" οnclick="AddComment()" />
</body>

after tomorrow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态创建元素

新学期欢迎新同学 function showit(){ var divMain=document.getElementById("divMain"); var btn=document.createElement("input"); btn.type="button"; btn.value="我是动态的"; divMain.appendChild(
复制链接

扫一扫