動的に生成したタグにIMGタグを追加するには？

前提

（例）
https://qiita.com/su8/items/f28c169a96f6e23a9791

実現したいこと

上記サイトのように生成したQRコードを固定IDのタグに追加するのではなく、動的に生成するテーブルタグの指定列にこのIMGを追加したいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
6    <script src="https://www.layuicdn.com/layui/layui.js"></script>
7  </head>
8  <body>
9      <h1>QRコード生成</h1>
10      <p>
11          <!-- データ入力 -->
12          <input type="text" id="msg">
13
14          <!-- エンコード処理イベントボタン -->
15          <input type="button" id="button" value="変換">
16      </p>
17      <div id="barCode"></div>
18      <div id="box" class="box" style="margin:20px;">
19        <!-- <img id="barcode" /> -->
20      </div>
21      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
22      </script>
23      <script>
24          $(function(){
25            // 変換ボタン押下時の処理
26            $('#button').click(function(){
27                // データ取得　日本語対応のためencodeURIComponentで処理
28                var msg = encodeURIComponent($('#msg').val());
29                // QRコードを置くためのimgタグ生成
30                var img = $('<img>').attr('src','https://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl='+msg);
31                console.log("img = " + img);
32              // 8 colums
33              var html = "<table class='layui-table'><thead><th>番号1</th><th>番号2</th><th>番号3</th><th>番号4</th><th>番号5</th><th>番号6</th><th>番号7</th><th>番号8</th></thead><tbody>";
34              for(var i = 0;i < 3;i ++){
35                html += "<tr><td style='white-space:pre;width:100px;'>" + "111" + "</td><td style='white-space:pre;'>" + "111" + "</td><td style='white-space:pre;width:100px;'>" + "111" + "</td><td style='white-space:pre;width:100px;'>" + "111" + "</td><td style='white-space:pre;width:100px;'>" + "111" + "</td><td style='white-space:pre;width:100px;'>" + "111" + "</td><td style='white-space:pre;width:100px;'>" + "111" + "</td><td id='qr"+i+"' style='white-space:pre;width:100px;'>" + "" + "</td></tr>";
36                // 生成したimgタグの挿入
37                $("td:last-child").html(img);
38                console.log("val = " + $("td:last-child").text() );
39              }
40                html += "</tbody></table>";
41                
42                $(".box").html(html);
43            });
44          });
45      </script>
46  </body>
47</html>
48

試したこと

$('#barCode'+i).html(img)でループの中に生成したTDタグのIDを指定し、IMGを挿入してみてもダメでした。
そもそも動的に生成したDOMのタグに対して、タグ追加は可能でしょうか。

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

回答1件

ベストアンサー

あえてやるなら以下のような感じですが
正直htmlをテキストベースで構築するのは微妙です
sytleもcssでやるクセをつけたほうがよいでしょう

javascript
1$(function(){
2  $('#button').click(function(){
3    var msg = encodeURIComponent($('#msg').val());
4    var img = $('<img>').attr('src','https://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl='+msg);
5    var html = "<table class='layui-table'><thead><th>番号1</th><th>番号2</th><th>番号3</th><th>番号4</th><th>番号5</th><th>番号6</th><th>番号7</th><th>番号8</th></thead><tbody>";
6    for(var i = 0;i < 3;i ++){
7      html += "<tr>";
8      html += "<td style='white-space:pre;width:100px;'>" + "111" + "</td>";
9      html += "<td style='white-space:pre;'>" + "111" + "</td>";
10      html += "<td style='white-space:pre;width:100px;'>" + "111" + "</td>";
11      html += "<td style='white-space:pre;width:100px;'>" + "111" + "</td>";
12      html += "<td style='white-space:pre;width:100px;'>" + "111" + "</td>";
13      html += "<td style='white-space:pre;width:100px;'>" + "111" + "</td>";
14      html += "<td style='white-space:pre;width:100px;'>" + "111" + "</td>";
15      html += "<td id='qr"+i+"' style='white-space:pre;width:100px;'>" + img.prop('outerHTML') + "</td>";
16      html += "</tr>";
17    }
18    html += "</tbody></table>";
19    $(".box").html(html);
20  });
21});