参考资料

1. HTML DOM 用指定的Name弹出元素的数量实例
2. HTML DOM 返回一个表单中元素的数量 实例
3. HTML DOM 返回一个iframe中的name属性的值
4. HTML DOM 当点击完button不可用 实例
5. HTML DOM 返回image的替代文本
6. HTML DOM 对image排版
7. HTML DOM 返回image的longdesc属性的值
8. HTML DOM 改变iframe的高度和宽度

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。