divをクローンして本文に追加します

-5

何か問題があります。私はhtmlのdivオブジェクト（この場合はidが "snowflake"のdiv）をクローンしてそれ自身に追加したいと思っています（新しい雪片を元の終わりに追加して、今私は2つの雪片を持っています）。これで、math.randomを使ってスノーフレークの位置を調整できるようになります。私はこれについてどうやって行くのですか？最終的にはランダムな配置で100個の雪片を作りたいと思っています。 jquery（純粋にjavascript、css、html）なしでこれを行う方法を教えてください。皆さん、ありがとうございました！divをクローンして本文に追加します

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); 
}

これは動作しますが、それは一つだけスノーフレークのクローンを作成します。私はページがクリックされるたびに作成したいと思います。

出典

2017-12-19 Michael Mungai

あなたは何を試してみましたか？私たちはここで解決策を書くだけではありません。特定の問題に関する具体的な質問にお答えします。 –

そして、ちょっとした点：「雪片」がなぜ雪片の中にあるのですか？そして、最初のものの後ろに追加の雪片が来るようにしたい場合は、最初のものに追加しないでください（あなたが望むように）、彼らは 'body'に追加されます。あなたはあなたのHTMLとまさに何をしようとしているのかを再考するべきです。 –

私はsnowflakeでcloneNodeメソッドを使用しようとしましたが、appendChildを本体に無駄にしようとしました。私は他のソリューションをオンラインで検索しようとしましたが、googleはjQueryのクローン（）メソッドを使用しています。 –

クラッターをクリアして、問題の重要な部分を処理してみましょう。

// 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>

出典

2017-12-19 21:41:26

すごくありがとう、スコット。複数の雪片を作成するとどうすればいいですか？ –

@MichaelMungai答えはすでにこれを示しています。ちょうどクリックしてください。 –

divをクローンして本文に追加します

答えて

関連する問題