<!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> innerHTML添加元素时的影响 </title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<!-- 如果用innerHTML的方式来追加一个新的元素，会让原来元素的事件丢失 -->
<input type="button" value="html添加元素" id="btn1">
<input type="button" value="document.createElement添加元素" id="btn2">
<div class="box">
<p>这是p</p>
<!-- <h3>我是h3</h3> -->
</div>
<script>
// 找元素
var box = document.getElementsByClassName('box')[0];
var p = document.getElementsByTagName('p')[0];
// 给 p 添加点击事件;
p.onclick = function() {
alert("我是p标签点出来的");
}
// 添加 点击事件 元素;
// innerHTML的方式来添加 innerHTML 追加的是标签;
document.getElementById('btn1').onclick = function () {
//给div加h3
box.innerHTML += "<h3>我是h3</h3>"; // 我是h3
}
// document.createElement 的方式来添加; //使用appendChild追加内容，追加的是元素
document.getElementById('btn2').onclick = function () {
var h3 = document.createElement('h3'); // 创建元素,
h3.innerHTML = "我是h3"; // 创建文本;
box.appendChild(h3); // 我是h3
}
</script>
</body>
</html>
网友评论