思维导图
用思维导图，结构化记录本书的核心观点。
1 使用document.write("");
1.1 案例展示
在页面中创建一个p标签
document.write("<p>创建p标签</p>");
存在问题：在页面加载后使用此方法创建元素，会覆盖掉body中其他内容； 在页面加载时创建可以避开此问题。
2 使用“对象”.innerHTML="";
2.1 案例展示
在id为divTest1的元素中创建一个a标签
document.getElementById("divTest1").innerHTML="<a href=\"https://www.baidu.com\">百度</a>";
3 创建元素对象
3.1 案例展示
在id为divTest1的元素中创建li标签
// 分三步：
// 第一步创建元素对象
var tempObj = document.createElement("li");
// 第二步，为新建元素对象赋值
tempObj.innerHTML = "这是一个li标签";
var fartherObj =
第三步，获取父元素对象，并追加创建的元素
document.getElementById("divTest1").appendChild(tempObj);
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建元素学习案例</title>
<style>
* {
margin: 0;
padding: 0;
}
#banner {
width: 360px;
height: 100px;
margin: 0 auto;
}
#banner li {
display: inline-block;
width: 80px;
height: 60px;
background: #b3d4fc;
}
#divTest1 {
width: 200px;
height: 100px;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="banner">
<li id="create1">创建方式1</li>
<li id="create2">创建方式2</li>
<li id="create3">创建方式3</li>
</div>
<div id="divTest1">
</div>
<script>
document.getElementById("create1").onclick = function () {
// alert("点击事件1")
// 使用document.write创建元素
document.write("<p>创建p标签</p>");
}
document.getElementById("create2").onclick = function () {
// alert("点击事件2")
// 使用对象.innerHT创建元素
document.getElementById("divTest1").innerHTML = "<a href=\"https://www.baidu.com\">百度</a>";
};
document.getElementById("create3").onclick = function () {
// alert("点击事件3")
// 创建元素对象创建元素
var tempObj = document.createElement("li");
tempObj.innerHTML = "这是一个li标签";
document.getElementById("divTest1").appendChild(tempObj);
};
</script>
</body>
</html>
