参考资料

1. HTML DOM 元素
2. HTML DOM 当点击完button不可用 实例
3. HTML DOM 返回一个表单的name 实例
4. HTML DOM 返回文档中的链接数
5. HTML DOM 返回一个区域的href属性的querystring部分 实例
6. HTML DOM为表格指定规则
7. HTML DOM在下拉列表中选择多个选项
8. HTML DOM 返回一个button的value 实例

HTML DOM 单元格的 innerHTML

详细介绍

innerHTML 是 DOM 元素的一个属性，用于获取或设置元素内的 HTML 内容。对于表格单元格（<td> 或 <th>），innerHTML 可以操作单元格内的所有内容。

标签

主要应用于：

• <td> (表格数据单元格)

• <th> (表格标题单元格)

用法

// 获取单元格内容
let content = cellElement.innerHTML;

// 设置单元格内容
cellElement.innerHTML = "新内容";

实例

<table id="myTable">
  <tr>
    <td id="cell1">原始内容</td>
  </tr>
</table>

<script>
  // 获取单元格
  let cell = document.getElementById("cell1");
  
  // 读取内容
  console.log(cell.innerHTML); // 输出: "原始内容"
  
  // 修改内容
  cell.innerHTML = "<strong>新加粗内容</strong>";
</script>

功能

1. 动态更新单元格内容

2. 插入包含HTML标签的内容

3. 完全替换单元格内的所有内容

4. 获取单元格内的原始HTML代码

CSS 扩展

可以通过innerHTML添加带有样式的元素：

cell.innerHTML = '<span style="color:red; font-weight:bold;">红色加粗文本</span>';

或者结合CSS类：

cell.innerHTML = '<div class="highlight">高亮内容</div>';

对应的CSS:

.highlight {
  background-color: yellow;
  padding: 5px;
  border-radius: 3px;
}