首页用js的dom操作完成一个页面，该页面有两个按钮，点击第一个按钮产生三个div，点击第二个按钮删除三个div，请给出完整代码

用js的dom操作完成一个页面，该页面有两个按钮，点击第一个按钮产生三个div，点击第二个按钮删除三个div，请给出完整代码

时间: 2023-06-01 07:04:27 浏览: 96

HTML代码： ```html <!DOCTYPE html> <html> <head> <title>DOM操作</title> <meta charset="UTF-8"> </head> <body> <button id="addBtn">添加</button> <button id="delBtn">删除</button> <div id="container"></div> <script src="dom.js"></script> </body> </html> ``` JS代码： ```javascript var addBtn = document.getElementById("addBtn"); var delBtn = document.getElementById("delBtn"); var container = document.getElementById("container"); addBtn.onclick = function() { for(var i = 0; i < 3; i++) { var div = document.createElement("div"); div.innerHTML = "这是第" + (i+1) + "个div"; container.appendChild(div); } } delBtn.onclick = function() { var divList = container.getElementsByTagName("div"); var len = divList.length; for(var i = 0; i < len; i++) { container.removeChild(divList[0]); } } ``` 在点击添加按钮时，使用for循环创建三个div节点并添加到容器中。在点击删除按钮时，使用getElementsByTagName方法获取所有的div节点，使用for循环删除所有的div节点。

阅读全文