<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <hr > -->
<!-- <img src="1_b.jpg" > -->
开始测试：
<button type="button">创建节点</button>
<button type="button">delete</button>
<div>
<hr>
<hr>
</div>
<script type="text/javascript">
let buts=document.getElementsByTagName('button');
let img=document.getElementsByTagName('img');
let d=document.getElementsByTagName('div')[0];
let b1=buts[0];
let b2=buts[1];
b1.onclick=function(){
// 船舰点击事件
console.log(img)
let h1=document.createElement('img');
// 1.创建
console.log(h1)
h1.setAttribute('src','1_b.jpg');
// 2.设置属性
document.body.appendChild(h1);
// 3.添加
}
b2.onclick=function(){
// if(img.length>0){
// // 添加判断,排除下标越界
// let img1=img[0];
// img1.remove();
// // 删除img1
document.body.removeChild(img[0]);
// document.body.removeChild(删除的对象);
// 1.先要获得对象,删除一个,获得一个,删除多个,获得多个,一次不可以完成
// }
}
</script>
</body>
</html>
- 一定要先创建，在插入；
- 注意参数，与调用对象；