创建元素的三种方式
2019-05-10 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 创建元素的三种方式 </title>
<style>
.box {
width: 300px;
height: 300px;
background-color: #f00;
}
</style>
</head>
<body>
document.write：可以往body里加子元素
问题1：只能给body加
问题2：它会覆盖原来body里的所有内容
不会用它
-------------------- 以下两种我们会用 --------------------------
innerHTML方式添加子元素
innerHTML += 一个标签
如果不用+= 用 = 会覆盖
document.creatElement
创建出一个元素
用法：传一个标签的名字
它就会帮你创建出一个空的标签，然后你要给它什么内容就加什么内容
创建出来不会看到，要想看到，还要加到一个父元素里
要调用父元素的 appendChild方法来添加 -->
<input type="button" value="document.write添加" id="btn1">
<input type="button" value="innerHTML添加" id="btn2">
<input type="button" value="creatElement添加" id="btn3">
<div class="box">
<h3>我是h3</h3>
<p>这是p</p>
</div>
<script>
//先找到div
var box = document.getElementsByClassName('box') [0];
// 第一种 document.write
document.getElementById('btn1').onclick = function() {
document.write('<h1>我是创建元素的第一种方式</h1>');
}
// 第二种 innerHTML
document.getElementById('btn2').onclick = function() {
console.log(document.body.innerHTML); //找到 body 里的所有节点;
console.log(box.innerHTML); // 找到 box 里的所有节点(获取所有内容包括标签);
console.log(box.innerText); // 找到 box 里的所有节点(只能获取纯文本);
// box.innerHTML = "<h3>我是创建元素的第二种方式</h3>"; 如果不用+= 用 = 会覆盖原来div里的所有内容;
box.innerHTML += "<h3>我是创建元素的第二种方式</h3>"; // 给div添加一个子元素;
}
// 第三种 document.creatElement 调用父元素的 appendChild方法来添加
document.getElementById('btn3').onclick = function() {
// 创建出来后只在内存中，没有加到页面上
var res = document.createElement('h3'); // 创建出一个空的(h3)元素
res.innerText = "我是创建元素的第三种方式"; // 添加文本
res.className = "xxx"; // 添加类名
console.log(res); // <div class="xxx"> 我是创建元素的第三种方式 </div>
// 如果你想看到它，还得加到页面里
// 给box添加一个子元素-->res
box.appendChild(res);
}
</script>
</body>
</html>
