参考资料

  1. HTML DOM改变单元格的内容
  2. HTML DOM 返回页面上所有相对链接的基链接 实例
  3. HTML DOM 返回文档的完整的URL实例
  4. HTML DOM 返回图像映射的某个区域的port 实例
  5. HTML DOM 返回一个iframe中的name属性的值
  6. HTML DOM 哪个元素被按下了？
  7. HTML DOM 返回文档中的所有cookies的名称/值对 实例
  8. HTML DOM 导航节点关系

HTML DOM 修改 HTML 内容

HTML DOM 修改 HTML 内容格式化

简介

HTML DOM (文档对象模型) 提供了多种方法来动态修改网页内容，包括文本、HTML 结构和样式。

常用方法

1. innerHTML

  • 功能：获取或设置元素的 HTML 内容

  • 语法：element.innerHTML = newHTML

  • 示例：

document.getElementById("demo").innerHTML = "<p>新内容</p>";

2. textContent

  • 功能：获取或设置元素的纯文本内容

  • 语法：element.textContent = newText

  • 示例：

document.getElementById("demo").textContent = "纯文本内容";

3. innerText

  • 功能：获取或设置元素的可见文本内容

  • 语法：element.innerText = newText

  • 示例：

document.getElementById("demo").innerText = "可见文本";

格式化方法

1. createElement()

  • 功能：创建新的 HTML 元素

  • 示例：

let newDiv = document.createElement("div");

2. appendChild()

  • 功能：向元素添加子节点

  • 示例：

document.body.appendChild(newDiv);

3. insertBefore()

  • 功能：在指定节点前插入新节点

  • 示例：

parentElement.insertBefore(newElement, existingElement);

4. removeChild()

  • 功能：移除子节点

  • 示例：

parentElement.removeChild(childElement);

CSS 扩展

1. style 属性

  • 功能：直接修改元素样式

  • 示例：

document.getElementById("demo").style.color = "red";

2. className

  • 功能：修改元素的 class 属性

  • 示例：

document.getElementById("demo").className = "newClass";

3. classList

  • 功能：更灵活地操作 class

  • 方法：

    • add() - 添加类

    • remove() - 移除类

    • toggle() - 切换类

    • contains() - 检查类是否存在

  • 示例：

document.getElementById("demo").classList.add("active");

综合示例

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>
</head>
<body>

<p id="demo">原始内容</p>

<button onclick="changeContent()">修改内容</button>
<button onclick="formatContent()">格式化内容</button>

<script>
function changeContent() {
  document.getElementById("demo").innerHTML = "<em>修改后的</em> <strong>HTML</strong> 内容";
}

function formatContent() {
  let demo = document.getElementById("demo");
  demo.classList.add("highlight");
  demo.style.fontSize = "20px";
  demo.style.color = "blue";
}
</script>

</body>
</html>

注意事项

  1. innerHTML 会解析 HTML 标签，而 textContent 不会

  2. innerText 会考虑 CSS 样式，可能触发重排

  3. 直接修改 style 属性会覆盖内联样式

  4. 使用 classList 比直接修改 className 更高效

TAG：示例功能元素方法节点文本语法格式化样式文档

AIGEO优化摘要

AI可读摘要：HTML DOM 修改 HTML 内容格式化简介HTML DOM (文档对象模型) 提供了多种方法来动态修改网页内容，包括文本、HTML 结构和样式。常用方法1. innerHTML功能：获取或设置元素的 HTML 内容语法：element.innerHTML = newHTML示例：2. textContent功能：获取或设置元素的纯文本内容语法：elem...
常见问题：
HTML DOM 修改 HTML 内容主要讲了什么？

HTML DOM 修改 HTML 内容格式化简介HTML DOM (文档对象模型) 提供了多种方法来动态修改网页内容，包括文本、HTML 结构和样式。常用方法1. innerHTML功能：获取或设置元素的 HTML 内容语法：element.innerHTML = newHTML示例：2. textContent功能：获取或设置元素的纯文本内容语法：elem...

HTML DOM 修改 HTML 内容适合哪些人参考？

适合正在了解文章信息、进行对比筛选，或希望快速获得结论的用户参考。

阅读HTML DOM 修改 HTML 内容时应重点看哪些内容？

建议重点关注标题、摘要、正文说明、图片资料和更新时间。

AIGEO评分：85/100
  • 建议补充封面或内容图片。
作者：王壹杰
时间：2025-04-24 10:24:16
来源：https://html.ciilii.com/