HTMLの要素からJSでランダムに１個抽出し、指定の位置に複製したい

■実現したいこと

<ul class="copy">
</ul>

<ul class="list">
    <li class="child">要素1</li>
    <li class="child">要素2</li>
    <li class="child">要素3</li>
</ul>

上記のようなコードを
↓
JSを使って、下記のようにしたい

<ul class="copy">
    <li class="child copied">要素2</li>
</ul>

<ul class="list">
    <li class="child">要素1</li>
    <li class="child">要素2</li>
    <li class="child">要素3</li>
</ul>

上記で言う、「要素2」はランダムに抽出されていて、かつ、下のul.list内のliのうちの一つが複製されたものであって欲しいです。
意図としては、リロードする度もしくは訪問者ごとに、違う表示結果を「その時のピックアップ」として表示したいためです。
（上部にピックアップを見せつつ、下部で一覧も見せたい）

■実現したいことのポイント
・JSに書かれた配列ではなく、HTMLの要素をランダム抽出して複製したい
・ul.list の内容を2度書く手間を省きたい（実際liの数や内容がとても多くなるため）
・やり方は生JSでもjQueryでもどちらでも良い

■自分で調べたこと
調べてみたところ、
配列からランダムに抽出する方法や、画像の名前に規則性を持たせた上でランダム表示する方法は
見つかったのですが、
あらかじめ書かれたHTMLの要素を指定して、ランダムに抽出した上でコピーするというやり方がわからなかったため、
どなたかわかる方、ご教示いただきたく存じます。

■参考にした記事
[JavaScriptで文字列や画像をランダムに表示する方法を現役エンジニアが解説【初心者向け】]
(https://techacademy.jp/magazine/25665)

[【JavaScript】複数存在する要素を取得してランダムにクラスを付与する方法]
(https://into-the-program.com/get-elements-add-random-class/)

やり方は生JSでもjQueryでもどちらでも良いです！
以上、どなたか解決方法がわかれば、ご教示いただきたく存じます。
何卒よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const l=[...document.querySelectorAll('.list li')];
4  const n=parseInt(Math.random()*l.length);
5  document.querySelector('.copy').appendChild(l[n].cloneNode(true));
6});
7</script>
8<ul class="copy">
9</ul>
10
11<ul class="list">
12    <li class="child">要素1</li>
13    <li class="child">要素2</li>
14    <li class="child">要素3</li>
15</ul>