参考资料

1. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
2. HTML DOM 哪个元素被按下了？
3. HTML DOM 对iframe排版
4. HTML DOM 节点列表长度
5. HTML DOM 返回一个区域的href属性的锚部分实例
6. HTML DOM 返回文档中表单数目
7. HTML DOM对单个单元格的内容水平对齐
8. HTML DOM 改变链接的target属性实例

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