创建表格及只创建一个元素的方法

<input type="button" value="点击" id="bt"/>
<div id="dv"></div>
<script src="commer.js"></script>
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.baidu.com"},
{name:"爱奇艺",href:"http://www.baidu.com"},
{name:"优酷",href:"http://www.baidu.com"},
{name:"腾讯",href:"http://www.baidu.com"}
];
//点击按钮创建表格
ver("bt").onclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
ver("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var tb1=document.createElement("td");
tb1.innerText=dt.name;
tableObj.appendChild(tb1);
//创建第二个列
var tb2=document.createElement("td");
tb2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
tableObj.appendChild(tb2);
}
};

</script>





<input type="button" value="点击" id="btn"/>
<div id="dv"></div>
<script src="commer.js"></script>
<script>
//有则删除,无则创建

//先判断有没有,有就删除,没有就创建,创建多次,但还是显示一个
// ver("btn").onclick=function () {
// //判断这个div中有没有按钮,有就删除
// //判断这个按钮的子元素是否存在
// if(ver("btn2")){
// ver("dv").removeChild(ver("btn2"));
// }
// var Obj=document.createElement("input");
// Obj.type="button";
// Obj.value="按钮";
// Obj.id="btn2";
// ver("dv").appendChild(Obj);
// };

//只创建一次
ver("btn").onclick=function () {
//判断这个div中有没有按钮,有就删除
//判断这个按钮的子元素是否存在
if(!ver("btn2")){
var Obj=document.createElement("input");
Obj.type="button";
Obj.value="按钮";
Obj.id="btn2";
ver("dv").appendChild(Obj);
}
};


</script>

猜你喜欢

转载自www.cnblogs.com/lujieting/p/10050433.html