リストから値を取得して自動繰り返しでhtmlを記述したい

前提・実現したいこと

お世話になります。
チェックボックスのリストを作っているのですが、項目が多いのでデータリストのようなものから取得して、htmlを自動繰り返し記述したいと思っております。
種類も多いので、下のようにAの1～4・Bの1～5のように複数のデータリストを設定できるようにしたいと思っております。
とりあえずは下の構文の形式を取得したいので、
もしよろしければ、よろしくお願いいたします。

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

htmlソースが長い

該当のソースコード

html
1<div>
2	<div>
3		<span>種類Aの1～4</span>
4		<a><input name="w" value="A1" type="checkbox"><span>A1</span></a>
5		<a><input name="w" value="A2" type="checkbox"><span>A2</span></a>
6		<a><input name="w" value="A3" type="checkbox"><span>A3</span></a>
7		<a><input name="w" value="A4" type="checkbox"><span>A4</span></a>
8	<div>
9	</div>
10		<span>種類Bの1～5</span>
11		<a><input name="w" value="B1" type="checkbox"><span>B1</span></a>
12		<a><input name="w" value="B2" type="checkbox"><span>B2</span></a>
13		<a><input name="w" value="B3" type="checkbox"><span>B3</span></a>
14		<a><input name="w" value="B4" type="checkbox"><span>B4</span></a>
15		<a><input name="w" value="B5" type="checkbox"><span>B5</span></a>
16	</div>
17</div>

試したこと

直接記述

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

ここにより詳細な情報を記載してください。

退会済みユーザー

2018/07/20 14:05

まずは質問の方法や注意事項など利用方法をよく読みましょう。https://teratail.com/help/question-tips

kissdesign_shop

2018/07/20 14:08

なるほど、ありがとうございます。失礼いたしました。

退会済みユーザー

2018/07/20 14:16

予想なので的外れかもしれませんが、おそらくjsonファイルの操作と、検索ワード「javascript」＋「DOM操作」で出てくる内容を組み合わせれば、やりたい事が出来るのでは無いかと思います。試してみて分からない場合はご質問を新しくお建て下さい。お時間合えば私も回答しょうと思います。ファイトなのです|ーﾟ)

kissdesign_shop

2018/07/20 14:32

ご丁寧にありがとうございます。正直、物理的な技術者の方なので、すがる思いであのような質問になってしまいました。すみません。まだまだ勉強したいと思います。本当にありがとうございました。