克隆 div 并将其附加到正文 [关闭]答案

【问题标题】：Clone div and append it to body [closed]克隆 div 并将其附加到正文 [关闭]
【发布时间】：2017-12-19 21:19:38
【问题描述】：

我遇到了一些麻烦。我想在 html 中获取一个 div 对象，在本例中是 id 为“雪花”的 div，克隆它，并将其附加到自身（将新雪花添加到原始雪花的末尾，这样我现在就有两个雪花）。有了这个，我希望能够使用 math.random 来调整雪花的位置。我该怎么办？最终，我想创建 100 个随机定位的雪花。请让我知道我可以在没有 jquery（纯 javascript、css 和 html）的情况下做到这一点的方法。谢谢大家！

HTML

 <body>
  <div id=body>
   <!-- Snowflake -->
   <div id="snowflake">
    <div class="snowflake-container">
      ...
    </div>
  </div>
  <!-- New snowflake should go here -->
 </div>
</body>

JAVASCRIPT

var snowflake = document.getElementById("snowflake");
var bodyDiv = document.getElementById("body");
var snowflakeContainer = document.createElement('div');
var snowflakeClone = snowflake.cloneNode(true);

bodyDiv.addEventListener("click", createSnowflake);

function createSnowflake() {
  console.log("click is working");
  bodyDiv.appendChild(snowflakeClone);
 }

这可行，但它只会创建一个雪花克隆。我想在每次点击页面时创建一个。

【问题讨论】：

你试过什么？我们不只是在这里写解决方案。我们回答有关具体问题的具体问题。
还有几点：为什么snowflake-container 在snowflake 里面？而且，如果您希望在第一个雪花之后出现额外的雪花，那么它们不会被附加到第一个雪花（如您所愿），它们将被附加到body。您应该重新考虑您的 HTML 以及您正在尝试做的事情。
我曾尝试在雪花上使用 cloneNode 方法，并尝试将其附加到正文中，但无济于事。我曾尝试在线搜索其他解决方案，但谷歌只为 jquery 提供 .clone() 方法，这对我没有帮助。
所以向我们展示您尝试过的代码。然后，我们可以告诉您哪里出错了。
向我们展示一些代码并解释它的用途。也许那时我们可以提出一种更简单的方法。

标签： javascript html css

【解决方案1】：

让我们清除杂乱，只处理问题的基本部分。

// Get a reference to the snow flake container
var snowflake = document.querySelector(".snowflake-container");

// Set up a click event handler for the document
document.addEventListener("click", createSnowflake);

function createSnowflake() {
  // Clone the first snow flake container and append the clone to the body
  document.body.appendChild(snowflake.cloneNode(true));
}

#snowflake {
  user-select:none; /* Prevents user from selecting content */
  background-image:url("http://ci.snowflake.az.us/wp-content/uploads/2015/10/cropped-snowflake-only-logo.png");
  background-size:contain;
  width:50px;
  height:50px;
}

<!-- The container should be the outermost element -->
<div class="snowflake-container">
  <div id="snowflake"></div>
</div>

【讨论】：

非常感谢斯科特。我将如何创建多个雪花？
@MichaelMungai 答案已经表明了这一点。继续点击。