JavaScriptでHTML要素を複製したい

Question

実現したいこと

タイムスケジュール表を作成しています。
「追加」ボタンを押した時にHTMLの要素が複製され、横に並ぶようにしたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: cloneLanes.cloneNode is not a function
    at HTMLAnchorElement.<anonymous>

該当のソースコード

function addDelete() {
  const addClone = document.getElementById("add-btn");
  addClone.addEventListener('click',() => {
   const cloneLanes = document.getElementsByClassName("lanes");
   const cloneBox = cloneLanes.cloneNode(true);
   document.body.appendChild(cloneBox);  
  });
}
window.addEventListener('load', addDelete)

<input id="day" type="text " placeholder="日付を入力する"/>

<a href="#" class="btn-stitch" id="add-btn">追加</a>
<a href="#" class="btn-stitch" id="del-btn">削除</a>


<div class="table">
  <div class="times">
		<div class="today"><span id="today"></span></div>
		<div class=time>9:00</div>
		<div class=time>10:00</div>
		<div class=time>11:00</div>
		<div class=time>12:00</div>
		<div class=time>13:00</div>
		<div class=time>14:00</div>
		<div class=time>15:00</div>
		<div class=time>16:00</div>
		<div class=time>17:00</div>
		<div class=time>18:00</div>
		<div class=time>19:00</div>
		<div class=time>20:00</div>
		<div class=time>21:00</div>
		<div class=time>22:00</div>
	</div>

	<div class="lanes">
	  <div class="staff--name"></div>
	</div>
</div>

試したこと

• function addDelete() {
  const addClone = document.getElementById("add-btn");
  addClone.addEventListener('click',() => {
  const cloneLanes = document.getElementsByClassName("lanes");

この後にconsole.log(cloneLanes)を入れてクリックにより要素が獲得できていることは確認しました。

• このエラーの原因は「関数として定義されていませんよ」というエラーとのこと

スペルミス、構文ミスなどがないか確認しました。

補足情報（FW/ツールのバージョンなど）

CSSでdisplay:flexは付与しています。

技術書や公式のメソッドやエラーの確認、ネットの情報を探しましたが解決できず、申し訳ありませんがご教授いただけますと幸いです。

Answer 1

getElementsByClassNameは複数個の結果を返す可能性があるので、配列のようなHTMLCollectionを返します。

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

1個目のみでよいならcloneLanes[0].cloneNode(true);で採れると思います。

Comments

[退会済みユーザー]

kei344様
ありがとうございます！エラーなくなりました！
getElementsByClassNameの仕組みまで丁寧にありがとうございます！理解深まりました。

ただ、画面上に表示されないのですが何が足りないのでしょうか？
重ね重ね申し訳ありません。

[kei344]

https://jsfiddle.net/vyrmqdt4/
提示のコード（+私の回答）で追加されますよ。

[退会済みユーザー]

ありがとうございます！
kei344様と同じように「test」でやってみたのですが、一瞬「test]と表示されるのですがすぐに消えてしまいます。念の為cssも全て消して実行してみましたが変わりませんでした。

[kei344]

ページ移動が起こってしまっている気がします。
ボタンを<a>要素でなく、<div>や<button>要素で試してみてください。

[退会済みユーザー]

kei344様
<button>にしたらできました！感動です????
最後まで丁寧に本当にありがとうございます！