如何在单击按钮时将覆盖添加到正文中，以及如何清除页面加载中的紫色覆盖内容

在单击按钮时将覆盖添加到正文中的方法可以通过以下步骤实现：

首先，在HTML文件中创建一个按钮元素，并为其添加一个唯一的ID属性，例如：

<button id="overlayButton">点击添加覆盖</button>

接下来，在JavaScript文件中编写一个事件监听器，以便在按钮被点击时执行相应的操作。可以使用addEventListener方法来添加事件监听器，代码如下：

document.getElementById("overlayButton").addEventListener("click", function() {
  // 在这里执行添加覆盖的操作
});

在事件监听器的回调函数中，可以使用DOM操作来创建一个覆盖元素，并将其添加到正文中。可以使用createElement方法创建一个新的元素，然后使用appendChild方法将其添加到正文中，代码如下：

document.getElementById("overlayButton").addEventListener("click", function() {
  var overlay = document.createElement("div");
  overlay.style.position = "fixed";
  overlay.style.top = "0";
  overlay.style.left = "0";
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.backgroundColor = "purple";
  overlay.style.opacity = "0.5";
  document.body.appendChild(overlay);
});

以上代码将创建一个覆盖元素，其样式为紫色半透明，并将其添加到正文中。

如果想要清除页面加载中的紫色覆盖内容，可以在按钮点击事件的回调函数中添加一个清除操作。可以使用removeChild方法将覆盖元素从正文中移除，代码如下：

document.getElementById("overlayButton").addEventListener("click", function() {
  var overlay = document.createElement("div");
  overlay.style.position = "fixed";
  overlay.style.top = "0";
  overlay.style.left = "0";
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.backgroundColor = "purple";
  overlay.style.opacity = "0.5";
  document.body.appendChild(overlay);

  // 在这里执行清除覆盖的操作
  setTimeout(function() {
    document.body.removeChild(overlay);
  }, 3000); // 3秒后清除覆盖
});

以上代码将在按钮点击时添加一个覆盖元素，并在3秒后将其从正文中移除。

这是一个简单的示例，可以根据实际需求进行修改和扩展。