JavaScript 修改元素内容
在 Web 开发中，动态修改页面内容是 JavaScript 的核心功能之一，通过操作 DOM（文档对象模型），开发者可以实时更新文本、HTML 结构或属性，从而实现交互式用户体验，以下是几种常见的修改方法及其应用场景。
修改文本内容
修改是更新元素的文本内容，JavaScript 提供了 textContent 和 innerText 两种属性，但二者存在细微差别。
textContent：获取或设置元素的纯文本内容，不解析 HTML 标签。document.getElementById('title').textContent = '新标题'会直接替换元素内的所有文本，包括子元素中的文本。innerText：同样用于设置文本内容，但会解析 CSS 样式，受元素可见性影响，如果元素被隐藏（如display: none），innerText将返回空字符串。
适用场景：当需要纯文本操作或避免 XSS 攻击时，优先选择 textContent；若需保留文本格式（如换行），则使用 innerText。
修改 HTML 结构
若需动态插入或替换 HTML 代码，可通过 innerHTML 或 outerHTML 实现。
innerHTML：设置元素内部的 HTML 内容。document.querySelector('.container').innerHTML = '<p>新增段落</p>'会完全覆盖元素的子元素。outerHTML：包含元素自身及其内部内容，赋值时，整个元素会被替换为新的 HTML 结构。
注意事项：使用 innerHTML 可能存在安全风险，若内容来自用户输入，需进行转义或使用 textContent 防止 XSS 攻击，频繁操作 innerHTML 可能影响性能，建议结合文档片段（DocumentFragment）优化。
修改元素属性
元素的属性（如 href、src、class 等）也可动态修改。
setAttribute()和getAttribute()：通用方法，适用于任意属性。document.getElementById('link').setAttribute('href', 'https://new-url.com')修改链接地址。- 直接属性访问：对于标准属性（如
id、className），可直接通过对象属性操作。element.className = 'active'或element.id = 'new-id'。 dataset属性：用于操作自定义数据属性（data-*）。element.dataset.userId = '123'对应 HTML 中的data-user-id="123"。
修改样式
动态调整元素样式是提升交互体验的关键。
style属性：直接修改内联样式。element.style.color = 'red'或element.style.display = 'none'。classListAPI：推荐用于操作 CSS 类名，提供add()、remove()、toggle()等方法。element.classList.add('active')添加类名，比直接操作className更安全高效。- CSS 变量：通过
setProperty()修改 CSS 变量。document.documentElement.style.setProperty('--primary-color', 'blue')，适用于主题切换等场景。
动态创建与插入元素
可先创建元素再插入 DOM。
createElement()和appendChild()：const newDiv = document.createElement('div'); newDiv.textContent = '新元素'; document.body.appendChild(newDiv)。insertAdjacentHTML()：在指定位置插入 HTML，支持'beforebegin'、'afterbegin'、'beforeend'、'afterend'四个位置。element.insertAdjacentHTML('afterend', '<p>后续内容</p>')。
综合应用示例
以下是一个简单的计数器示例，展示内容与样式的联动修改：
const counter = document.getElementById('counter');
const incrementBtn = document.getElementById('increment');
let count = 0;
incrementBtn.addEventListener('click', () => {
count++;
counter.textContent = count;
if (count > 5) {
counter.style.color = 'red';
counter.classList.add('highlight');
}
});
通过合理运用上述方法，JavaScript 可实现灵活高效的内容修改，为网页注入动态活力，开发者需根据场景选择合适的技术,并注意性能与安全性问题。
