按钮点击清空div内容

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

按钮点击清空div内容可以通过JavaScript来实现。我们需要获取到要清空内容的div元素，然后在按钮的点击事件中将div的innerHTML属性设置为空字符串。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
  <title>按钮点击清空div内容</title>
</head>
<body>
  <div id="myDiv">这是要清空的内容</div>
  <button onclick="clearDiv()">点击清空</button>
  <script>
    function clearDiv() {
      var div = document.getElementById("myDiv");
      div.innerHTML = "";
    }
  </script>
</body>
</html>

在上面的示例代码中，我们首先在body标签中定义了一个id为"myDiv"的div元素，并设置了初始内容为"这是要清空的内容"。然后，我们在按钮元素中添加了一个onclick事件，当按钮被点击时，会调用名为clearDiv的JavaScript函数。

在clearDiv函数中，我们通过getElementById方法获取到id为"myDiv"的div元素，并将其innerHTML属性设置为空字符串。这样，当按钮被点击时，div的内容就会被清空。

除了使用innerHTML属性来清空div的内容，还可以使用textContent属性。innerHTML属性会将内容解析为HTML，而textContent属性会将内容解析为纯文本。如果要清空的内容中包含HTML标签，使用innerHTML会更合适；如果要清空的内容只是纯文本，使用textContent会更高效。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
  <title>按钮点击清空div内容</title>
</head>
<body>
  <div id="myDiv">这是要清空的内容</div>
  <button onclick="clearDiv()">点击清空</button>
  <script>
    function clearDiv() {
      var div = document.getElementById("myDiv");
      div.textContent = "";
    }
  </script>
</body>
</html>

在上面的示例代码中，我们将clearDiv函数中的div.innerHTML = ""; 修改为div.textContent = "";，这样就可以使用textContent属性来清空div的内容了。

需要注意的是，如果要清空的div元素中还包含了其他子元素（如p、span等），使用innerHTML或textContent属性只会清空div的直接子元素的内容，而不会清空子元素的子元素的内容。如果需要清空所有子元素的内容，可以使用div.innerHTML = ""; 或 div.textContent = ""; 配合使用递归函数来实现。

总结一下，通过JavaScript的innerHTML或textContent属性，我们可以实现按钮点击清空div内容的功能。innerHTML适用于清空包含HTML标签的内容，而textContent适用于清空纯文本内容。需要注意清空子元素内容时的递归处理。

按钮点击清空div内容

相关阅读