html タグ内に変数を書き込めるようにしたい

Question

実現したいこと

htmlのbuttonタグに変数を入れたいと考えています。
変数をTESTとしたとき、

<div id='○○'> <button onclick="△△()"><img src="□□/TEST.png" border="0" style="width : 125px;height : 125px;"></button>

発生している問題・分からないこと

現状では変数を入れることは困難と思われ、このままだと上記の文章を3000個程記述する必要があり、管理が複雑になりすぎて困っています。
他に良い方法があれば、ご回答よろしくお願いいたします。

現在のシステム構成としては、
JavaScriptのdocument.getElementById('○○').innerHTMLを利用してhtmlのボタンを複数表示させています。
システム構成を簡単にしてソースコードに記述しておきます。(起動確認済み)

該当のソースコード

<!--test.html-->
<script type="text/javascript" src='./test.js'></script>

<div id='JS1'></div>	
<div id='JS2'></div>	

<div  id='name1'>									
<button  onclick="TEST()"><img src="img1.png" border="0" style="width : 125px;height : 125px;"></button>	
</div>	

//test.js(htmlとjsは同じフォルダ内に置いてあります。)
function TEST(){
//1つ目
document.getElementById('JS1').innerHTML =
'<div	id=name2"><img src="img2.png" border="0" style="width : 125px;height : 125px;"></div>'	

//2つ目
document.getElementById('JS2').innerHTML =
'<div	id=name3"><img src="img3.png" border="0" style="width : 125px;height : 125px;"></div>'												

}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

検索して思ったのは、htmlには変数を書き込むことが出来ず、jsでしか変数入力は出来ないのだと思います。
JavaScriptのdocument.getElementById('○○').innerHTMLもHTMLに書き込むだけで、コメント書きのようなもので、変数を打ち込むことはで出来ないと思いました。

補足

特になし

Answer 1

JavaScriptから見るとHTMLはただの文字列なので、文字列として操作すればいいでしょう。

いろいろ書きかたあると思いますけどたとえばこんな感じ。(動かしてないのでバグあるかも)

function TEST(){
  let imageInfo = {
    "JS1": {
      "img":"img1.png",
      "id": "name1"
    }
    "JS2": {
      "img": "img2.png",
      "id": "name2"
    }
  }

  for(let elementId in imageInfo) {
    let items = imageInfo[elementId]
    document.getElementById(elementId).innerHTML =
        `<div id="${items["id"]}"><img src="${items["img"]}" border="0" style="width : 125px;height : 125px;"></div>`
  }
}

Comments

[ten]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

以下のソースコードで正常に動作しました！
function TEST(){
let imageInfo = {
"JS1": {
"img":"img1.png",
"id": "name1"
},
"JS2": {
"img": "img2.png",
"id": "name2"
}
}

for(let elementId in imageInfo) {
let items = imageInfo[elementId]
document.getElementById(elementId).innerHTML =
`<div id="${items["id"]}"><img src="${items["img"]}" border="0" style="width : 125px;height : 125px;"></div>`
}
}

上記のコードを参考にしてオリジナルでやりたかったことも作成しました。
以下に記述します。
function TEST(){
for(let a=2;a<=3;a++){
b=a-1
items = {
"num":"JS"+b,
"img":"img"+a+".png",
"id": "name"+a

}
document.getElementById(items["num"]).innerHTML =
`<div id=${items["id"]}"><img src="${items["img"]}" border="0" style="width : 125px;height : 125px;"></div>`

}
}

${items["○○"]}という存在を知らなかったので、とても勉強になりました。
ありがとうございました。

[TakaiY]

これはテンプレートリテラルというもので、変数の値を埋め込んだ文字列を作ることができます。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

itemsのところで使っているように
'<div id="' + items["id"] + '><img...' ～
みたいに+で連結して書いても同じです。 埋め込む変数が多いと記述が煩雑になるので、テンプレートリテラルの方を好んで使っています。

[ten]

確かにそうですね。
これからはなるべくテンプレートリテラルで記述するように頑張りたいと思います！

Answer 2

ディレクトリにあるファイルを全て取得するプログラムをかけた方が役に立ちそうですね

Comments

[TakaiY]

そうですね。 「実際にやりたいことは何なのか」がわかるとより良い解決方法が出てきますよね。