JavaScript appendについて

Question

JavaScriptのappendChildで同じ内容を2か所に追加したいと思い、
下記コードを書いたところ、
しかし、
1か所にしか追加されません
2か所に追加することはできないのでしょうか？
もしできないのであれば、
あまり手を加えず同じものを追加する代替え案があれば教えてください

<script>
window.onload=function(){
aaa=document.createElement("div");
aaa.style.width="300px";
aaa.style.height="300px";
aaa.style.cssFloat="left";
aaa.style.background="red";
area1.appendChild(aaa);//ここには追加されるますが
area2.appendChild(aaa);//こっちには同じ内容のものが追加されない

aaa_image=document.createElement("img");
aaa_image.style.width="50px";
aaa_image.style.height="50px";
aaa_image.src="https://www.packaging.com/wp-content/uploads/product-samples.jpg";
aaa.appendChild(aaa_image);
}
</script>

<div id="area1"></div>
<div id="area2"></div>

Answer 1

cloneNodeしてみてはいかがでしょう。

【Node.appendChild - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。追加しようとしたノードが既に存在していたら、それは現在の親ノードから除かれ、新しい親ノードに追加されます（他のノードに追加する前にそのノードを親ノードから削除する必要はありません）。

これは、ノードが同時にドキュメントの 2 箇所に存在できないということを意味します。ノードがすでに親を持っている場合、最初にノードが削除された後、新しい位置の末尾に追加されます。Node.cloneNode() は、新しい親の末尾に追加する前に、ノードのコピーを作成するために使用できます。

【Node.cloneNode() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode

Comments

[ahk]

回答ありがとうございます
上記参照に組みなおしてみましたが、動きません
何か間違いがありますでしょうか？

<script>
window.onload=function(){
aaa=document.createElement("div");
aaa.style.width="300px";
aaa.style.height="300px";
aaa.style.cssFloat="left";
aaa.style.background="red";
area1.appendChild(aaa);

aaa_image=document.createElement("img");
aaa_image.style.width="50px";
aaa_image.style.height="50px";
aaa_image.src="https://www.packaging.com/wp-content/uploads/product-samples.jpg";
aaa.appendChild(aaa_image);

ppp=document.getElementById("area1");
clone=ppp.cloneNode(true);
area2.cloneNode(clone);

}
</script>

<div id="area1"></div>
<div id="area2"></div>

[kei344]

https://jsfiddle.net/s49d3b82/

[ahk]

わざわざすみません
下記で無事画像もできました
感謝します

<script>
window.onload=function(){
aaa=document.createElement("div");
aaa.style.width="300px";
aaa.style.height="300px";
area1.append(aaa);//ここには追加されるますが

aaa_image=document.createElement("img");
aaa_image.style.width="50px";
aaa_image.style.height="50px";
aaa_image.src="https://www.packaging.com/wp-content/uploads/product-samples.jpg";
aaa.appendChild(aaa_image);

area2.append(aaa.cloneNode(true));//こっちには同じ内容のものが追加されない

}
</script>

<div id="area1" style="background-color:lime;width:300px;height:300px"></div>
<div id="area2" style="background-color:yellow;width:300px;height:300px"></div>