首页js中单击按钮调用add hr（）函数，实现添加水平线，多次点击会添加多条水平线

js中单击按钮调用add hr（）函数，实现添加水平线，多次点击会添加多条水平线

时间: 2024-12-08 12:20:51 浏览: 14

在JavaScript中，你可以通过给HTML按钮绑定`click`事件来实现这个功能。首先，你需要定义一个名为`addHr()`的函数，它会在每次点击按钮时动态插入一个新的`<hr>`元素到页面上。以下是简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加水平线</title> </head> <body> <button id="addButton">点击添加水平线</button> <script> // 定义addHr函数 function addHr() { // 获取按钮和文档的引用 var addButton = document.getElementById('addButton'); var contentArea = document.body; // 创建新的hr元素 var newHr = document.createElement('hr'); // 将新创建的元素添加到文档中 contentArea.appendChild(newHr); } // 绑定按钮的点击事件 addButton.addEventListener('click', addHr); </script> </body> </html> ``` 在这个例子中，当你点击id为`addButton`的按钮时，就会调用`addHr`函数，每点击一次就添加一条新的水平线。如果需要阻止连续点击多次添加，可以考虑增加一个计数器或者清除旧的`<hr>`元素。

阅读全文