JavaScriptでテーブルの行を作成する方法


方法1: createElementとappendChildを使用する方法

// テーブル要素を取得
var table = document.getElementById("myTable");
// 新しい行を作成
var row = document.createElement("tr");
// 行にセルを追加
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.innerHTML = "セル1の内容";
cell2.innerHTML = "セル2の内容";
// セルを行に追加
row.appendChild(cell1);
row.appendChild(cell2);
// 行をテーブルに追加
table.appendChild(row);

この例では、createElementメソッドを使用して新しいtr要素(行)を作成し、createElementメソッドを使用して新しいtd要素(セル)を作成します。innerHTMLプロパティを使用してセルの内容を設定し、appendChildメソッドを使用してセルを行に追加します。最後に、appendChildメソッドを使用して行をテーブルに追加します。

方法2: innerHTMLを使用する方法

// テーブル要素を取得
var table = document.getElementById("myTable");
// 新しい行を作成
var newRow = "<tr><td>セル1の内容</td><td>セル2の内容</td></tr>";
// テーブルの末尾に行を追加
table.innerHTML += newRow;

この例では、innerHTMLプロパティを使用して新しい行のHTML文字列を作成し、テーブルの末尾に行を追加します。注意点として、innerHTMLプロパティはテーブルの内容を完全に置き換えるため、既存のテーブルの内容が失われることに注意してください。

以上の方法を使用してJavaScriptでテーブルの行を作成することができます。これらのコード例を参考にしながら、自分のプロジェクトに適した方法を選択してください。