参考资料

1. HTML DOM一个单元格的innerHTML
2. HTML DOM弹出下拉列表中被选中的选项的索引
3. HTML DOM 事件
4. HTML DOM对单个单元格的内容水平对齐
5. HTML DOM 创建一个链接指向一个低分辨率的image
6. HTML DOM 给image加上border
7. HTML DOM 返回页面上所有相对URL的基URL 实例
8. HTML DOM 返回image的name

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

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