首页用js的dom操作完成一个页面，该页面有两个按钮，第一个按钮的onclick绑定函数getDivs,点击第一个按钮产生三个div；第二个按钮的onclick事件绑定delDivs函数，点击第二个按钮删除三个div，请给出完整代码

用js的dom操作完成一个页面，该页面有两个按钮，第一个按钮的onclick绑定函数getDivs,点击第一个按钮产生三个div；第二个按钮的onclick事件绑定delDivs函数，点击第二个按钮删除三个div，请给出完整代码

时间: 2023-06-01 22:04:30 浏览: 103

HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM操作</title> <style> div{ width: 100px; height: 100px; background-color: #ccc; margin: 10px; float: left; } </style> </head> <body> <button onclick="getDivs()">生成三个div</button> <button onclick="delDivs()">删除三个div</button> <div id="container"></div> <script src="dom.js"></script> </body> </html> ``` JavaScript部分： ```javascript // 获取container元素 var container = document.getElementById("container"); // 生成三个div function getDivs() { for (var i = 0; i < 3; i++) { var div = document.createElement("div"); container.appendChild(div); } } // 删除三个div function delDivs() { for (var i = 0; i < 3; i++) { var div = container.lastChild; container.removeChild(div); } } ``` 注：该代码可以将HTML和JavaScript部分分开写在不同文件中，但需要注意文件路径的引用。

阅读全文