1. document.write("标签的代码及内容");
缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
<body>
<input type="button" value="创建一个p" id="btn"/>
码仙码仙码仙码仙码仙码仙
<script>
//document.write("标签代码及内容");
document.getElementById("btn").onclick = function () {
document.write("<p>这是一个p</p>");
};
</script>
</body>
2. 对象.innerHTML="标签及代码";
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 300px;
height: 50px;
border: 2px solid pink;
}
</style>
</head>
<body>
<input type="button" value="创建一个p" id="btn"/>
<div id="dv">这是div</div>
码仙码仙码仙码仙码仙码仙码仙
<script>
//点击按钮,在div中创建一个p标签
//对象.innerHTML="标签代码及内容";
document.getElementById("btn").onclick = function () {
document.getElementById("dv").innerHTML = "<p>天生我才必有用</p>";
};
</script>
</body>
3. document.createElement("标签的名字");
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div {
width: 200px;
height: 50px;
border: 2px dashed pink;
}
</style>
</head>
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script>
//创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
document.getElementById("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
pObj.innerText = "这是一个p";
//把创建后的子元素追加到父级元素中
document.getElementById("dv").appendChild(pObj);
};
</script>
</body>