参考资料

1. HTML DOM对单个单元格的内容垂直对齐
2. HTML DOM 返回一个区域的href属性的锚部分实例
3. HTML DOM 返回一个表单acceptCharset属性的值
4. HTML DOM document.write() 方法
5. HTML DOM 导航节点关系
6. HTML DOM对单个单元格的内容水平对齐
7. HTML DOM 根节点childNodes 和 nodeValue
8. HTML DOM 给image加上border

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