JavaScript createTextNode
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 document.createTextNode 方法。此方法创建一个新的文本节点，该节点可以添加到 DOM 树中，用于在网页上显示文本内容。
基本定义
document.createTextNode 方法使用指定的文本内容创建一个新的文本节点。文本节点只包含文本，不能包含子节点。
文本节点与元素节点不同。它们表示元素内的文本内容。当您需要将纯文本添加到 DOM 而不包含 HTML 标记时，此方法非常有用。
创建基本文本节点
此示例演示了如何创建一个简单的文本节点并将其附加到文档主体。
<!DOCTYPE html>
<html>
<head>
<title>Basic Text Node</title>
</head>
<body>
<div id="container"></div>
<script>
const textNode = document.createTextNode('Hello, World!');
const container = document.getElementById('container');
container.appendChild(textNode);
</script>
</body>
</html>
在此基本示例中，我们创建一个内容为“Hello, World!”的文本节点。然后，我们将此文本节点附加到 ID 为“container”的 div 元素。
appendChild 方法用于将文本节点添加到 DOM。这展示了 createTextNode 将文本内容添加到网页的基本用法。
添加多个文本节点
此示例展示了如何创建多个文本节点并将其添加到不同的元素中。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Text Nodes</title>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
<script>
const headerText = document.createTextNode('Welcome to our site');
const contentText = document.createTextNode('Main content goes here');
const footerText = document.createTextNode('Copyright 2025');
document.getElementById('header').appendChild(headerText);
document.getElementById('content').appendChild(contentText);
document.getElementById('footer').appendChild(footerText);
</script>
</body>
</html>
在这里，我们创建了三个具有不同内容的分离文本节点。每个文本节点都附加到文档中的不同 div 元素。
这表明 createTextNode 可用于填充页面的多个部分。每个文本节点都是独立的，可以单独修改。
将文本节点与元素结合
此示例演示了如何将文本节点与 HTML 元素结合以创建更复杂的內容结构。
<!DOCTYPE html>
<html>
<head>
<title>Combining Elements</title>
</head>
<body>
<div id="article"></div>
<script>
const article = document.getElementById('article');
const title = document.createElement('h2');
const titleText = document.createTextNode('Article Title');
title.appendChild(titleText);
const para = document.createElement('p');
const paraText = document.createTextNode('This is the article content.');
para.appendChild(paraText);
article.appendChild(title);
article.appendChild(para);
</script>
</body>
</html>
在此示例中，我们创建了元素节点（h2 和 p）和文本节点。在将元素添加到主文章 div 之前，文本节点被添加到各自的父元素中。
这表明 createTextNode 如何与元素创建结合使用来构建结构化内容。文本节点提供实际内容，而元素提供语义结构。
动态内容更新
此示例展示了如何使用文本节点动态更新页面上的内容。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Updates</title>
</head>
<body>
<div id="counter">Count: </div>
<button onclick="incrementCounter()">Increment</button>
<script>
let count = 0;
const counterText = document.createTextNode(count);
document.getElementById('counter').appendChild(counterText);
function incrementCounter() {
count++;
counterText.nodeValue = count;
}
</script>
</body>
</html>
在这里，我们创建了一个计数器，每次单击按钮时它会递增。初始计数使用文本节点显示，我们通过修改其 nodeValue 属性来更新它。
这表明文本节点可用于高效的动态更新。我们不需要重新创建文本节点，而是简单地更新现有节点，这对于频繁更新更有效率。
转义 HTML 字符
此示例演示了 createTextNode 如何自动转义 HTML 字符，从而提供针对 XSS 攻击的保护。
<!DOCTYPE html>
<html>
<head>
<title>HTML Escaping</title>
</head>
<body>
<div id="safe-content"></div>
<script>
const maliciousInput = '<script>alert("XSS")</script>';
const safeText = document.createTextNode(maliciousInput);
document.getElementById('safe-content').appendChild(safeText);
</script>
</body>
</html>
在此示例中，我们尝试将潜在的恶意脚本内容作为文本节点插入。createTextNode 方法会自动转义 HTML 字符，将它们渲染为文本而不是可执行代码。
这显示了在使用 createTextNode 显示用户生成内容时的重要安全优势。它通过将所有输入视为字面文本来帮助防止 XSS 攻击。
来源
在本文中，我们展示了如何在 JavaScript 中使用 document.createTextNode。此方法对于安全地将文本内容添加到 DOM 至关重要，并且在处理动态内容时特别有用。
作者
列出 所有 JS DOM 教程。