首页使用DOM提供的增删查改等函数写个HTML

使用DOM提供的增删查改等函数写个HTML

时间: 2023-06-12 21:07:48 浏览: 85

以下是一个简单的HTML代码，使用DOM提供的函数动态操作页面元素。 ```html <!DOCTYPE html> <html> <head> <title>DOM操作HTML</title> </head> <body> <h1 id="title">Hello World!</h1> <div id="content">这是一个div元素</div> <button id="btn-add">添加元素</button> <button id="btn-remove">删除元素</button> <button id="btn-update">更新内容</button> <script> // 获取元素 var title = document.getElementById('title'); var content = document.getElementById('content'); var btnAdd = document.getElementById('btn-add'); var btnRemove = document.getElementById('btn-remove'); var btnUpdate = document.getElementById('btn-update'); // 添加元素 btnAdd.onclick = function() { var newElement = document.createElement('p'); newElement.innerHTML = '这是一个新的p元素'; document.body.appendChild(newElement); }; // 删除元素 btnRemove.onclick = function() { document.body.removeChild(content); }; // 更新内容 btnUpdate.onclick = function() { title.innerHTML = 'Hello JavaScript!'; }; </script> </body> </html> ``` 这个HTML页面包含一个标题、一个文本、三个按钮，通过DOM操作可以动态添加、删除、更新页面元素。

阅读全文