使用JavaScript往标签中动态添加元素
2017-09-15 本文已影响0人
K也许K
-
往标签中添加元素有两种方式,第一种是覆盖式,就是讲之前标签中的元素全部覆盖,使用新的元素;第二种是添加式,是将元素加入标签中且保存原有内容;两者之间的区别就是在innerHTML之后是"="还是"+="符合
- 覆盖式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="showTable()" value="添加">
<ul id="show" >
<li >home1</li>
</ul>
<script>
function showTable(){
var show=document.getElementById("show");
var htm="<li>home</li>";
show.innerHTML=htm;
}
</script>
</body>
</html>
结果显示:
- 原页面
image.png
- 覆盖后
image.png
- 添加式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="showTable()" value="添加">
<ul id="show" >
<li >home1</li>
</ul>
<script>
function showTable(){
var show=document.getElementById("show");
var htm="<li>home</li>";
show.innerHTML+=htm;
}
</script>
</body>
</html>
-
原网页
image.png
-
添加后
image.png
