如何在单击时附加div？

在前端开发中，可以通过JavaScript来实现在单击时附加div的效果。具体的实现步骤如下：

首先，在HTML文件中创建一个div元素，设置其样式和内容，可以使用id或class属性来标识该div，例如：

<div id="myDiv">这是一个div</div>

接下来，在JavaScript中获取该div元素，并为其添加一个单击事件监听器。可以使用addEventListener方法来实现，例如：

var divElement = document.getElementById("myDiv");
divElement.addEventListener("click", function() {
  // 在这里编写单击时执行的代码
});

在单击事件的回调函数中，可以创建一个新的div元素，并将其附加到页面中的指定位置。可以使用createElement方法创建新的div元素，使用appendChild方法将其添加到指定的父元素中，例如：

var newDivElement = document.createElement("div");
newDivElement.innerHTML = "新的div";
document.body.appendChild(newDivElement);

完整的代码示例如下：

<!DOCTYPE html>
<html>
<head>
  <title>单击时附加div</title>
  <style>
    #myDiv {
      width: 200px;
      height: 200px;
      background-color: #f0f0f0;
      text-align: center;
      line-height: 200px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="myDiv">这是一个div</div>

  <script>
    var divElement = document.getElementById("myDiv");
    divElement.addEventListener("click", function() {
      var newDivElement = document.createElement("div");
      newDivElement.innerHTML = "新的div";
      document.body.appendChild(newDivElement);
    });
  </script>
</body>
</html>

这样，当用户单击原始的div元素时，会在页面中附加一个新的div元素。你可以根据实际需求修改样式和内容，以及附加位置等。