JavaScriptで動的にHTMLの内容を変更する方法

###前提・実現したいこと
JavaScriptを用いて、ファイルを読み込んだ後下記ページを参考にして作成した
カードデザインをまとめて動的に変更させたいと考えています。
カードデザイン参考

###疑問点
HTMLを動的に変更する方法はいくつか見たのですがDocumentfragmentなど
divIDを指定して1つずつ変更するものしか見かけませんでした。
下記のようなテンプレートを用意して、ファイルを読み込んだ内容をひとまとめに変更する方法は何かありませんか。

HTML
1<!--テンプレ-->
2          <a class="list-group-item" href="#aaa" onclick="comp('#apple')">
3            <div class="row">
4              <div class="col-sm-1">
5                <img src="aaa">
6              </div>
7              <div class="col-sm-5">
8                <h4 class="list-group-item-heading">aaa</h4>
9                <p class="list-group-item-text">aaa</p>
10              </div>
11              <div class="col-sm-6">
12                <p class="list-group-item-text">aaa</p>
13                <p class="list-group-item-text">aaa</p>
14              </div>
15            </div>
16          </a>
17///

例）ファイルを読み込み後、HTMLのカードデザインのリスト内に下記を追加

HTML
1・・・
2            </div>
3          </a><!--ここがカードリストの一番下とする-->
4          <a class="list-group-item" href="#ファイル内容A" onclick="comp('#ファイル内容A')">
5            <div class="row">
6              <div class="col-sm-1">
7                <img src="aaa">
8              </div>
9              <div class="col-sm-5">
10                <h4 class="list-group-item-heading">ファイル内容B</h4>
11                <p class="list-group-item-text">ファイル内容C</p>
12              </div>
13              <div class="col-sm-6">
14                <p class="list-group-item-text">ファイル内容D</p>
15                <p class="list-group-item-text">ファイル内容E</p>
16              </div>
17            </div>
18          </a>
19///