1、动态创建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="动态创建表格" id="btn"/>
<div id="box"></div>
<script>
var arr = [
{name:"百度", href:"http://www.baidu.com"},
{name:"新浪", href:"http://www.sina.com.cn"},
{name:"淘宝", href:"https://www.taobao.com"},
{name:"天猫", href:"https://www.tmall.com"},
{name:"京东", href:"https://www.jd.com"},
{name:"唯品会", href:"https://www.vip.com"}
];
var box = document.getElementById("box");
document.getElementById("btn").onclick = function(){
//创建table标签并加到div中
var tableObj = document.createElement("table");
tableObj.border = "1";
tableObj.cellPadding = "0";
tableObj.cellSpacing = "0";
box.appendChild(tableObj);
//创建行,把行加到table中
for(var i=0; i<arr.length; i++){
var trObj = document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,加入到行中
var td1 = document.createElement("td");
td1.innerHTML = arr[i].name;
trObj.appendChild(td1);
//创建第二个列加入到行中
var td2 = document.createElement("td");
td2.innerHTML = "<a href="+arr[i].href+">"+arr[i].name+"</a>";
trObj.appendChild(td2);
}
};
</script>
</body>
</html>
结果:
第二列是可以点击跳转的
2、在创建新的元素的过程中,点击按钮就会创建一次,再点击按钮再创建一次,如何解决这个问题?使得点击多次按钮,创建出来的元素也只创建了一次。
方法一:先判断有没有,有就删除,然后再创建。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>
<script>
var box = document.getElementById("box");
document.getElementById("btn").onclick = function(){
if(document.getElementById("divObj")) {
//判断有没有,有就先删除,if里是true,表示有
box.removeChild(document.getElementById("divObj"));
}
//创建一个div用来包括要创建的内容
var divObj = document.createElement("div");
divObj.id = "divObj";
box.appendChild(divObj);
//创建一个p元素
var pObj = document.createElement("p");
pObj.innerHTML = "这是三只小狗";
//那创建的元素追加到父元素中
divObj.appendChild(pObj);
//创建一个img元素
var imgObj = document.createElement("img");
imgObj.src = "1.jpg";
imgObj.alt = "三只小狗";
//那创建的元素追加到父元素中
divObj.appendChild(imgObj);
};
</script>
</body>
</html>
这种方法会造成多次点击按钮,不断地重复的删除和创建
方法二:先判断有没有,没有就创建,有就不创建了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<div id="box" style="border:1px solid red; width: 400px;">
我是一个盒子
</div>
<script>
var box = document.getElementById("box");
document.getElementById("btn").onclick = function(){
//判断,没有的话就创建
if(!document.getElementById("divObj")) {
//创建一个div用来包括要创建的内容
var divObj = document.createElement("div");
divObj.id = "divObj";
box.appendChild(divObj);
//创建一个p元素
var pObj = document.createElement("p");
pObj.innerHTML = "这是三只小狗";
//那创建的元素追加到父元素中
divObj.appendChild(pObj);
//创建一个img元素
var imgObj = document.createElement("img");
imgObj.src = "1.jpg";
imgObj.alt = "三只小狗";
//那创建的元素追加到父元素中
divObj.appendChild(imgObj);
}
};
</script>
</body>
</html>
两种方法,都能实现多次点击按钮,只创建一次对象。