innerHtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
window.onload = function () {
var color = document.getElementById("color");
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(this.innerHtml);
};
}
//innerHtml方法给color添加元素
// color.innerHTML += '<li>white</li>';
};
</script>
<ul id="color">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>yellow</li>
<li>pink</li>
</ul>
</body>
</html>
此时运行点击任意一个,弹框显示undefined,为什么呢,因为html是大写的
alert(this.innerHTML);
取消注释的内容,点击事件失效。
innerHTML会先清空原来的内容,然后再添加新的内容,原来的内容已经没有了,只不过是后来添加 的内容和原来的内容长得一样而已。
如果考虑使用innerHTML,要考虑之前的事件会不会失效。
DOM方法
会把新的内容追加到原来的内容里面,原来内容所具有的事件,依然会在。
<script>
window.onload = function () {
var color = document.getElementById("color");
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(this.innerHTML);
};
}
//innerHtml方法给color添加元素
// color.innerHTML += '<li>white</li>';
//DOM方法给color添加元素
var newLi = document.createElement("li");
newLi.innerHTML = 'white';
color.appendChild(newLi);
};
</script>
代码中,原来的元素的点击事件都存在,新添加的元素没有点击事件、
如果要用innerHTML
可以把如下代码
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(this.innerHTML);
};
}
放在添加元素后的代码的后面
添加元素再获取再添加事件。
最后把两种办法写两个script放一起
<script>
window.onload = function () {
var color = document.getElementById("color");
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(this.innerHTML);
};
}
//DOM方法给color添加元素
var newLi = document.createElement("li");
newLi.innerHTML = 'white';
color.appendChild(newLi);
};
</script>
<script>
window.onload = function () {
var color = document.getElementById("color");
// innerHtml方法给color添加元素
color.innerHTML += '<li>white</li>';
var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(this.innerHTML);
};
};
};
</script>