参考资料

  1. HTML DOM 返回图像映射某个区域的坐标实例
  2. HTML DOM 鼠标的坐标？
  3. HTML DOM单元格内容垂直对齐
  4. HTML DOM 返回图像映射的某个区域的protocol 实例
  5. HTML DOM 返回和设置链接的href属性实例
  6. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
  7. HTML DOM 返回图像映射的某个区域的hostname实例
  8. HTML DOM 返回和设置链接的hreflang属性实例

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：示例功能元素方法节点文本语法格式化样式文档