JavaScript基础教程（六十二）HTML DOM之改变 HTML：前端必会！HTML动态操控术，让你的网页“活”起来[特殊字符]

最新推荐文章于 2025-11-27 12:57:01 发布

原创最新推荐文章于 2025-11-27 12:57:01 发布 · 292 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

JavaScript基础教程专栏收录该内容

91 篇文章

订阅专栏

DOM（文档对象模型）是网页的核心结构，JavaScript通过操作DOM可以实现动态改变网页内容、结构和样式。让我们深入解析四种改变HTML的关键方法。

一、innerHTML：最常用的内容替换利器

innerHTML允许获取或设置元素内部的HTML内容，是最常用的DOM操作方式：

// 获取元素内容
let content = document.getElementById('myDiv').innerHTML;

// 设置新内容（支持HTML标签）
document.getElementById('myDiv').innerHTML = '<h2>新标题</h2><p>带格式的文本</p>';

二、outerHTML：完全替换元素本身

outerHTML与innerHTML不同，它会替换整个元素（包括自身）：

// 替换整个元素
document.getElementById('myDiv').outerHTML = '<section id="newSection">全新章节</section>';

三、textContent vs innerText：纯文本操作

两者都用于处理文本内容，但有重要区别：

let element = document.getElementById('myDiv');

// textContent获取所有文本（包括隐藏元素）
let allText = element.textContent;

// innerText只获取可见文本（考虑CSS样式）
let visibleText = element.innerText;

// 设置纯文本（自动转义HTML标签）
element.textContent = '<script>alert("安全")</script>'; // 不会执行脚本

四、实战示例：动态用户列表

// 创建动态用户列表
function updateUserList(users) {
  const list = document.getElementById('userList');
  
  // 使用innerHTML批量更新
  list.innerHTML = users.map(user => 
    `<li class="user-item">
      <span>${user.name}</span>
      <button onclick="deleteUser(${user.id})">删除</button>
    </li>`
  ).join('');
}

// 添加新用户
function addUser(name) {
  const list = document.getElementById('userList');
  // 使用insertAdjacentHTML高效添加（避免整体重绘）
  list.insertAdjacentHTML('beforeend', 
    `<li>${name} <button>删除</button></li>`);
}

五、性能与安全须知

性能优化：频繁操作DOM会导致页面重绘，建议批量操作或使用文档片段(document.createDocumentFragment())
安全风险：直接使用innerHTML插入用户输入可能导致XSS攻击，务必对内容进行转义

// 安全的HTML转义函数
function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

掌握这些DOM操作方法，你将能够创建更加动态和交互性强的网页应用，大幅提升用户体验！