割り勘額を計算してくれる簡易Webアプリを作成中に学習したことを書き留めておく。
当方、初学者のため記事の内容に間違いや改善点などございましたら、ぜひコメントでご指摘ください。

#要件
「追加」ボタンをクリックし、名前、年齢、性別を入力するフォームを複製したい。(最大8人)

　　　　　　　　　　　⇓

##フォームのHTML
フォームから値を受け取って計算をする予定なので、inputタグのname属性にインデント番号を付与し、
複製するタイミングで1ずつ足していく。

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">

<script type="text/javascript" src="addForm.js"></script>

</head>

<body>
<div class="input-form" id="input-form">
	<div class="member" id="member">
<!--入力した値を計算したいのでname属性にインデント番号を付与-->
		<input type="text" size="20" name="name-1" placeholder="名前">
		<input type="text" size="3" name="age-1" placeholder="年齢">
		<label for="male">
		<input type="radio" value="男性" id="male">男性
		</label>
		<label for="female">
		<input type="radio" value="女性" id="female">女性
		</label>
	</div>
</div>
<div class="bt_addForm">
<!--ボタンをクリックしたらJavascriptファイル内の関数addForm()を実行する-->
	<input type="button" value="追加" onclick="addForm()">
</div>
</body>
</html>

#createElement()を使って要素を複製

##createElement()とは
JavaScript で HTML 要素を複製するメソッド。引数にtrueを指定すれば、子ノードごと複製できる。

使い方

//複製する要素を取得
const element = document.getElementById("id");
//要素を複製
const newelement = element.cloneNode(true);

##実装

addForm.js

// cloneNodeで要素を複製し、追加する

//インデント番号を設定
let i = 2
function addForm() {
    // 8人以上なら処理を終了する
	if (i > 8) {
		return true;

	} else {
        // 複製するHTML要素を取得
		const element = document.getElementById("member");

        // 要素を複製
		const newelement = element.cloneNode(true);

        // 子要素を指定しname属性の値を変更
		const newelement_name = newelement.children[0];
		newelement_name.name = 'name-'+i;
		
		const newelement_age = newelement.children[1];
		newelement_age.name = 'age-'+i;

        //親要素を取得し 複製した要素を追加
		const parent = document.getElementById("input-form");
		parent.appendChild(newelement);

       //インデント番号を更新
		i++;
	}
}

#まとめ
当初はcreateElement()で一つずつ要素を作成し、DOMを組み上げてからHTMLに追加する方法をとっていたが、その方法ではコードが冗長になる上に、複製したい要素に変更が加わった場合Jsファイルも書き換えなければいけなくなる。

一方、cloneNode()を使用した場合は元のHTML要素を構造を保ったまま複製し、必要な部分だけ書き換えればよいので、書くコードが短くなり、複製したい要素に変更を加えた場合もJsファイルをほとんどいじらなくてよい。

###※(2021年12月24日追記)
上記コードは一番最初のフォームをそのままcloneNode()で複製する処理になっているので、最上部のフォームにテキストを入力してから「追加」ボタンを押した場合、追加されたフォームにも入力したテキストが入ってしまう。
複製したフォームを関数内で初期化してから追加してもよいが、それだと無駄な処理が増えてしまいそう。

なので、HTMLのtemplateタグを使用して初期化されたフォームのテンプレートを作成し、それを複製、追加する方法に書き換えました。
templateタグを使ってフォームを複製