参考资料

1. HTML DOM 返回一个区域的href属性的锚部分实例
2. HTML DOM 返回加载的当前文档的URL实例
3. HTML DOM 设置image的hspace和vspace属性
4. HTML DOM 重置表单
5. HTML DOM改变表格边框的宽度
6. HTML DOM将下拉列表变成多行列表
7. HTML DOM 哪个鼠标键被点击了？
8. HTML DOM 提交表单

HTML DOM一个单元格的innerHTML

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;
}