insertAdjacentHTMLでテーブルの挿入

Question

解決したいこと

insertAdjacentHTML()でテーブルに挿入される空白を削除

現状

const table = document.getElementById("time-table");
const HTML = `
  <tr>
    <td class="date">date</td>
    <td class="time">time</td>
    <td class="name">name</td>
    <td class="event">event</td>
    <td class="distance">distance</td>
  </tr>`;
table.insertAdjacentHTML("afterbegin", HTML);

上のJavaScriptファイルが発火すると、下のhtmlに挿入されるのですが、変数HTML内で定義していない" "が挿入されてしまい、表と表の間に空白行が生成されてしまう。

<table>
  <thead>
    <tr>
      <th class="date">日付</th>
      <th class="time">タイム</th>
      <th class="name">名前</th>
      <th class="event">種目</th>
      <th class="distance">距離</th>
    </tr>
  </thead>
  <tbody id = "time-table">
    <tr>
      <td class="date">date</td>
      <td class="time">time</td>
      <td class="name">name</td>
      <td class="event">event</td>
      <td class="distance">distance</td>
    </tr>
    "
                 "
  </tbody>
</table>

自分で調べたことと仮説検証

• 全角空白や綴じタグがあるかどうかの確認
• \nで改行を削除できないかの検証

お手数おかけしますがよろしくお願いいたします。

Comments

[int32_t]

スクリプト実行前のHTMLはどのようになっていますか?

Answer 1

こんにちは。

制御記号が混じっているようです。

const table = document.getElementById("time-table");
const HTML = `
  <tr>
    <td class="date">date</td>
    <td class="time">time</td>
//                            ^これを削除
    <td class="name">name</td>
    <td class="event">event</td>
    <td class="distance">distance</td>
  </tr>`;
table.insertAdjacentHTML("afterbegin", HTML);

Comments

[fastman]

解決しましたありがとうございます！
何も表示されていないので全く気が付きませんでした。