按钮点击清空div(清空div内容)

按钮点击清空div的功能可以通过JavaScript来实现。我们需要给按钮添加一个点击事件，当按钮被点击时，我们可以通过操作DOM来清空div的内容。

示例代码如下：

HTML部分：

<div id="myDiv">这是一个div</div>
<button id="clearBtn">清空div</button>

JavaScript部分：

// 获取按钮和div的引用
var clearBtn = document.getElementById("clearBtn");
var myDiv = document.getElementById("myDiv");
// 给按钮添加点击事件
clearBtn.addEventListener("click", function() {
  // 清空div的内容
  myDiv.innerHTML = "";
});

在上面的示例代码中，我们首先通过`document.getElementById`方法获取到按钮和div的引用，然后使用`addEventListener`方法给按钮添加一个点击事件。当按钮被点击时，事件处理函数会被触发。

在事件处理函数中，我们通过`innerHTML`属性将div的内容设置为空字符串，从而清空div的内容。`innerHTML`属性可以获取或设置元素的HTML内容。

需要注意的是，使用`innerHTML`属性清空div的内容会将div内部的所有子元素也一并清空。如果只想清空div的文本内容而保留子元素，可以使用`textContent`属性。

除了使用`innerHTML`属性，还可以使用其他方法来清空div的内容。例如，可以使用`innerText`属性将div的文本内容设置为空字符串，或者使用`removeChild`方法逐个删除div的子元素。

我们还可以通过修改CSS样式来隐藏div的内容，而不是真正清空div的内容。例如，可以使用`display`属性将div的`display`值设置为`none`，从而隐藏div的内容。这种方法不会改变div的实际内容，只是在页面上不显示而已。

要实现按钮点击清空div的功能，可以通过JavaScript操作DOM来清空div的内容。常用的方法有使用`innerHTML`属性、`textContent`属性、`removeChild`方法或修改CSS样式等。根据具体需求选择合适的方法来清空div的内容。