--- title: HTMLTableRowElement.insertCell slug: Web/API/HTMLTableRowElement/insertCell tags: - DOM - Gecko - Gecko DOM Reference - tableRow translation_of: Web/API/HTMLTableRowElement/insertCell ---
{{ApiRef}}

概要

テーブル行に新規セルを挿入し、セルへの参照を返します。

構文

var cell = HTMLTableRowElement.insertCell(index);

例

<table>
  <tr id="row0">
    <td>Original cell</td>
  </tr>
</table>

<script type="text/javascript">

function addCell(tableRowID) {
  // 引数に指定された id によりテーブル行要素への参照を取得
  var rowRef = document.getElementById(tableRowID);

  // セルインデックス 0 の箇所にセルを挿入
  var newCell   = rowRef.insertCell(0);

  // セルにテキストノードを追加
  var newText  = document.createTextNode('New cell')
  newCell.appendChild(newText);
}

// 対象テーブル行の id をパラメータとし、関数 addCell を実行
addCell('row0');

</script>

対象テーブルを valid な HTML とするには、tr 要素が最低でもひとつ td 要素を持っていなければなりません。

insertCell はテーブルにセルを直接的に挿入して新しい参照を返すものである事に注意して下さい。このメソッドを用いる場合、 予め {{domxref("document.createElement()")}} によって td 要素を生成する必要はありません。

ブラウザ互換性

Gecko 固有の注意事項

仕様書