JSでinputを生成した時にチェックボックスとテキストの位置が反転してしまう現象

前提・実現したいこと

お世話になっております。
後々管理しやすいようにチェックボックスつきのinputをJSのforEachで生成しようと考えております。
一度、HTMLで実際の要素を作成し、それを元にJSを使って生成しました。概ねうまく行ったのですが
チェックボックスとテキストの位置が想定のものとは逆の位置（チェックボックス左、テキスト右の順を想定しています）
で表示されてしまいます。ディベロッパーツールで確認すると、テキストが先に挿入されたのちに、inputがappendchildされるので、確かにそうなるよねと言うことは理解できましたが、この順番を逆転させる方法が思いつきません。
JSで要素生成しながらもチェックボックス左でテキスト右と言うように配置することは可能でしょうか？
アドバイスいただけると大変助かります。

該当のソース

JS
1'use strict';
2{
3
4  const countries = [
5    'JP',
6    'CH',
7    'SK',
8    'VN',
9    'TH',
10    'TW',
11    'US'
12  ];
13  const geographyList = document.querySelectorAll('.geography-list');
14  countries.forEach(country => {
15    const div = document.createElement('div');
16    div.classList.add('flex');
17    const input = document.createElement('input');
18    const label = document.createElement('label');
19    input.type = "checkbox";
20    input.name = "d";
21    input.value = country;
22    input.classList.add('input2');
23    label.textContent = country;
24    label.appendChild(input);
25    div.appendChild(label);
26    geographyList[0].appendChild(div);
27  })
28
29
30}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Practice</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8  <body>
9      <div class="geography-list hidden">
10        <!-- <div class="flex">
11          <label><input type="checkbox" name="d" value="JP" class="input2">JP</label>
12        </div>
13        <div class="flex">
14          <label><input type="checkbox" name="d" value="JP" class="input2">JP</label>
15        </div> -->
16      </div>
17    </div>
18
19
20    <script src="js/main.js"></script>
21
22  </body>
23</html>

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

回答1件

ベストアンサー

js
1countries.forEach(country => {
2  const div = document.createElement('div');
3  div.classList.add('flex');
4  div.innerHTML = `<label><input type="checkbox" name="d" value="${country}" class="input2">${country}</label>`;
5  geographyList[0].appendChild(div);
6});