<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
*
* 元素创建-----为了提高用户的体验
* 元素创建的三种方式:
* 1. document.write("标签的代码及内容");
* 2. 对象.innerHTML="标签及代码";
* 3. document.createElement("标签的名字");
*
* */
</script>
<style>
div{
width: 300px;
height: 200px;
border:2px solid pink;
}
</style>
</head>
<body>
<p>================================================第一种创建方式=======================================================</p>
<input type="button" value="创建一个p" id="btn1"/>
前端真好玩
<script src="common.js"></script>
<script>
//document.write("标签代码及内容");
my$("btn1").onclick=function () {
document.write("<p>这是一个p</p>");
};
// document.write("<p>这是一个p</p>");
//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
</script>
<p>==================================================第二种创建方式==================================================</p>
<input type="button" value="创建一个p" id="btn2" />
<div id="dv1"></div>
<script src="common.js"></script>
<script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn2").onclick=function () {
my$("dv1").innerHTML="<p>后端也好玩</p>";
};
</script>
<p>=================================================第三种创建方式===================================================</p>
<input type="button" value="创建p" id="btn"/>
<div id="dv2"></div>
<script src="common.js"></script>
<script>
//第三种方式创建元素
//创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv2").appendChild(pObj);
};
</script>
<script src="common.js"></script>
</body>
</html>
其中，common.js文件的代码是：
function my$(id) {
return document.getElementById(id);
}
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
