我遇到了一些麻烦。我想在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);
}
这有效，但它只创建一个雪花克隆。我想在每次点击页面时创建一个。
让我们清除混乱，只处理问题的基本部分。
// 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>