参考资料

1. HTML DOM对单个单元格的内容水平对齐
2. HTML DOM 返回文档中的链接数
3. HTML DOM 返回图像映射的某个区域的port 实例
4. HTML DOM 节点
5. HTML DOM 元素
6. HTML DOM 创建一个链接指向一个低分辨率的image
7. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
8. HTML DOM删除下拉列表中的选项

HTML DOM一个行的innerHTML

HTML DOM 的 innerHTML 属性

详细介绍

innerHTML 是 DOM 元素的一个属性，用于获取或设置元素的 HTML 内容（包括标签和文本）。

标签

适用于所有 HTML 元素，如：

• <div>

• <p>

• <span>

• <table>

• 其他所有 HTML 元素

用法

// 获取元素的 HTML 内容
let content = element.innerHTML;

// 设置元素的 HTML 内容
element.innerHTML = "新的HTML内容";

实例

<div id="example">原始内容</div>

<script>
  // 获取内容
  let div = document.getElementById("example");
  console.log(div.innerHTML); // 输出: "原始内容"

  // 设置内容
  div.innerHTML = "<strong>新内容</strong> 带HTML标签";
</script>

功能

1. 获取元素的 HTML 内容（包括子元素和文本）

2. 设置元素的 HTML 内容（会解析 HTML 标签）

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

CSS 扩展

可以与 CSS 结合使用来动态改变样式：

element.innerHTML = '<span style="color:red;">红色文本</span>';

或通过 CSS 类：

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

对应的 CSS：

.highlight {
  background-color: yellow;
  padding: 5px;
  border: 1px solid #ccc;
}