修改元素内容

在 DOM 操作中，经常需要修改元素的内容。JavaScript 提供了多种方法来修改元素的文本内容和 HTML 内容。

textContent 属性

textContent 属性用于获取或设置元素的文本内容，不包括 HTML 标签。

语法

javascript

// 获取文本内容
let text = element.textContent;

// 设置文本内容
element.textContent = "新文本内容";

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>修改元素内容示例</title>
</head>
<body>
    <h1 id="title">原始标题</h1>
    <p id="paragraph">原始段落内容</p>
    <div id="container">
        <p>内部段落</p>
        这是一些文本
    </div>
</body>
</html>

javascript

// 获取元素
let title = document.getElementById("title");
let paragraph = document.getElementById("paragraph");
let container = document.getElementById("container");

// 获取文本内容
console.log(title.textContent);     // 输出：原始标题
console.log(paragraph.textContent); // 输出：原始段落内容
console.log(container.textContent); // 输出：内部段落 这是一些文本

// 设置文本内容
title.textContent = "新标题";
paragraph.textContent = "这是新的段落内容";

// 设置包含特殊字符的文本（会被转义）
container.textContent = "这是一个包含 <strong>HTML 标签</strong> 的文本";
// 结果会显示为纯文本："这是一个包含 <strong>HTML 标签</strong> 的文本"

innerText 属性

innerText 属性也用于获取或设置元素的文本内容，但它会考虑 CSS 样式，不会返回隐藏元素的文本。

语法

javascript

// 获取文本内容
let text = element.innerText;

// 设置文本内容
element.innerText = "新文本内容";

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>修改元素内容示例</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <p>可见段落</p>
        <p class="hidden">隐藏段落</p>
        <p>另一个可见段落</p>
    </div>
</body>
</html>

javascript

let container = document.getElementById("container");

// textContent 会返回所有文本，包括隐藏元素的文本
console.log(container.textContent); 
// 输出：可见段落 隐藏段落 另一个可见段落

// innerText 只返回可见的文本
console.log(container.innerText); 
// 输出：可见段落 另一个可见段落

// 设置文本内容
container.innerText = "这是通过 innerText 设置的新内容";

innerHTML 属性

innerHTML 属性用于获取或设置元素的 HTML 内容，包括所有 HTML 标签。

语法

javascript

// 获取 HTML 内容
let html = element.innerHTML;

// 设置 HTML 内容
element.innerHTML = "<strong>新 HTML 内容</strong>";

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>修改元素内容示例</title>
</head>
<body>
    <div id="container">
        <p>原始段落</p>
        <ul>
            <li>项目 1</li>
            <li>项目 2</li>
        </ul>
    </div>
</body>
</html>

javascript

let container = document.getElementById("container");

// 获取 HTML 内容
console.log(container.innerHTML);
// 输出：
// <p>原始段落</p>
// <ul>
//     <li>项目 1</li>
//     <li>项目 2</li>
// </ul>

// 设置 HTML 内容
container.innerHTML = `
    <h2>新标题</h2>
    <p>这是新的<strong>段落内容</strong></p>
    <ul>
        <li>新项目 1</li>
        <li>新项目 2</li>
        <li>新项目 3</li>
    </ul>
`;

// 添加更多内容到现有内容中
container.innerHTML += "<p>追加的段落</p>";

outerHTML 属性

outerHTML 属性用于获取或设置元素及其所有子元素的 HTML 内容，包括元素本身。

语法

javascript

// 获取元素及其内容的 HTML
let html = element.outerHTML;

// 替换元素及其内容
element.outerHTML = "<div>新的元素和内容</div>";

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>修改元素内容示例</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">原始段落</p>
    </div>
</body>
</html>

javascript

let paragraph = document.getElementById("paragraph");

// 获取元素及其内容的 HTML
console.log(paragraph.outerHTML);
// 输出：<p id="paragraph">原始段落</p>

// 替换元素
paragraph.outerHTML = "<h2>新的标题</h2>";

// 注意：此时 paragraph 元素已经不存在于 DOM 中
// console.log(paragraph.outerHTML); // 这会报错

insertAdjacentHTML 方法

insertAdjacentHTML() 方法可以在指定位置插入 HTML 内容，而不会覆盖现有内容。

语法

javascript

element.insertAdjacentHTML(position, text);

position 参数可以是以下值之一：

"beforebegin": 元素之前
"afterbegin": 元素内部的第一个子节点之前
"beforeend": 元素内部的最后一个子节点之后
"afterend": 元素之后

示例

html

<!DOCTYPE html>
<html>
<head>
    <title>修改元素内容示例</title>
</head>
<body>
    <div id="container">
        <p>原始内容</p>
    </div>
</body>
</html>

javascript

let container = document.getElementById("container");

// 在元素之前插入
container.insertAdjacentHTML("beforebegin", "<h1>标题</h1>");

// 在元素内部的第一个子节点之前插入
container.insertAdjacentHTML("afterbegin", "<p>第一个段落</p>");

// 在元素内部的最后一个子节点之后插入
container.insertAdjacentHTML("beforeend", "<p>最后一个段落</p>");

// 在元素之后插入
container.insertAdjacentHTML("afterend", "<footer>页脚</footer>");

结果 HTML 结构：

html

<h1>标题</h1>
<div id="container">
    <p>第一个段落</p>
    <p>原始内容</p>
    <p>最后一个段落</p>
</div>
<footer>页脚</footer>

安全考虑

使用 innerHTML 和 insertAdjacentHTML 时需要特别注意安全性，因为它们可能导致 XSS（跨站脚本）攻击。

javascript

// 危险的做法 - 用户输入可能包含恶意脚本
let userInput = "<script>alert('XSS 攻击!')</script>";
document.getElementById("container").innerHTML = userInput;

// 安全的做法 - 转义用户输入
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

let userInput = "<script>alert('XSS 攻击!')</script>";
document.getElementById("container").textContent = escapeHtml(userInput);

性能考虑

不同的方法在性能上有所差异：

javascript

let container = document.getElementById("container");

// 性能较差 - 每次都会触发重排和重绘
for (let i = 0; i < 1000; i++) {
    container.innerHTML += `<p>段落 ${i}</p>`;
}

// 性能较好 - 只触发一次重排和重绘
let html = "";
for (let i = 0; i < 1000; i++) {
    html += `<p>段落 ${i}</p>`;
}
container.innerHTML = html;

// 性能最好 - 使用文档片段
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    let p = document.createElement("p");
    p.textContent = `段落 ${i}`;
    fragment.appendChild(p);
}
container.appendChild(fragment);

最佳实践

选择合适的方法：
- 只修改文本内容时使用 textContent
- 需要保留 HTML 格式时使用 innerHTML
- 需要考虑样式和可见性时使用 innerText
注意安全性：使用用户输入的内容时，优先使用 textContent，避免 XSS 攻击。
性能优化：批量修改 DOM 时，考虑使用文档片段或先构建字符串再一次性设置。
避免内存泄漏：在替换元素时，注意清理事件监听器和引用。

通过掌握这些修改元素内容的方法，您可以更灵活地操作 DOM，创建动态和交互式的网页。

修改元素内容 ​

textContent 属性 ​

语法 ​

示例 ​

innerText 属性 ​

语法 ​

示例 ​

innerHTML 属性 ​

语法 ​

示例 ​

outerHTML 属性 ​

语法 ​

示例 ​

insertAdjacentHTML 方法 ​

语法 ​

示例 ​

安全考虑 ​

性能考虑 ​

最佳实践 ​

修改元素内容

textContent 属性

语法

示例

innerText 属性

语法

示例

innerHTML 属性

语法

示例

outerHTML 属性

语法

示例

insertAdjacentHTML 方法

语法

示例

安全考虑

性能考虑

最佳实践