JavaScriptでのinnerHTMLについて

Question

JavaScriptでボタンを押すとテーブルの行が増えていくプログラムを記載しております。
下記のようなコードで増やすと、行数は増えるのですが出力されたHTMLのタグ要素が消えてしまいます。

<td data-title="test" class="col-1">test</td> ↓ 実際に出力されるもの <td>Round</td>

タグの中身も追加したい場合、この変数では駄目なのでしょうか。

    var table = document.getElementById("table");
    
    // 行を行末に追加
    var row = table.insertRow(-1);

    //td分追加
    var cell1 = row.insertCell(-1);
    
    // セルの内容入力
    cell1.innerHTML = '<td data-title="test" class="col-1">' + 'test ' + '</td>';

Comments

[int32_t]

(ちょっと間違いがあったためコメント抹消しました)

[yambejp]

testがなぜRoundに変わるか根拠が必要です

[momiji0210]

失礼しました。サンプルソースがかなりの量あったので、ミニマムで書き直しました。
質問時の書き間違えになります！

Answer 1

    cell1.innerHTML = '<td data-title="test" class="col-1">' + 'test ' + '</td>';

cell1 は insertCell(-1) で作られた <td> 要素です。<td> 要素の直下に<td>要素を入れることはできないため、<td data-title="test" class="col-1"> はHTMLパーザにより無視されます。

属性を個別に設定するか、

cell1.dataset.title = 'test';
cell1.className = 'col-1';
cell1.textContent = 'test';

outerHTML で <td> を入れ替えるとよいでしょう。

cell1.outerHTML = '<td data-title="test" class="col-1">' + 略...

insertCell(-1) を使わない手もあります。

row.insertAdjacentHTML('beforeend', '<td data-title="test" class="col-1">' + 略...);

Comments

[momiji0210]

ありがとうございます！完全にこの現象でした。
どうやっても付与されなかったので、助かりました。
非常にわかりやすいアドバイスありがとうございました。

Answer 2

処理としては微妙ですがinnerHTMLをouterHTMLにするとかでしょうか・・
DOMで処理したほうがベターだと思います

手抜きDOM

<template>
<tr>
<td data-title="test" class="col-1">test</td>
</tr>
</template>
<script>
function func(){
  const table = document.getElementById("table");
  const template = document.querySelector("template");
  table.appendChild(template.content.cloneNode(true));
}
</script>
<input type="button" value="btn" onclick="func()">
<table id="table">
</table>