js 创建文本节点 document.createTextNode

时间：2024-01-23 21:09:31

示例中的第一个div元素中不包含内容，因此不会产生文本节点。只要开始标签和结束标签之间 有内容，就会创建一个文本节点，因此第二个

元素会有一个文本节点的子节点，虽然它只包含空 格。这个文本节点的 nodeValue 就是一个空格。第三个

元素也有一个文本节点的子节点，其 nodeValue 的值为"Hello World!"。下列代码可以用来访问这个文本节点: 

let textNode = div.firstChild; // 或div.childNodes[0] 取得文本节点的引用后，可以像这样来修改它:
div.firstChild.nodeValue = "Some other message"; 4 只要节点在当前的文档树中，这样的修改就会马上反映出来。修改文本节点还有一点要```

注意，就是
HTML 或 XML 代码(取决于文档类型)会被转换成实体编码，即小于号、大于号或引号会被转义，如 下所示:
// 输出为"Some <strong>other</strong> message" div.firstChild.nodeValue = "Some <strong>other</strong> message";
这实际上是在将 HTML 字符串插入 DOM 文档前进行编码的有效方式。

## 1. 创建文本节点 document.createTextNode()可以用来创建新文本节点，它接收一个参数，即要插入节点的文本。 
跟设置已有文本节点的值一样，这些要插入的文本也会应用 HTML 或 XML 编码，如下面的例子所示: 
```js
let textNode = js
document.createTextNode("<strong>Hello</strong> world!");

创建新文本节点后，其 ownerDocument 属性会被设置为 document。但在把这个节点添加到文档 树之前，我们不会在浏览器中看到它。以下代码创建了一个

元素并给它添加了一段文本消息: 

let element = document.createElement("div");
element.className = "message";
document.body.appendChild(element); 10

这个例子首先创建了一个

元素并给它添加了值为"message"的 class 属性，然后又创建了 一个文本节点并添加到该元素。最后一步是把这个元素添加到文档的主体上，这样元素及其包含的文本 会出现在浏览器中。 一般来说一个元素只包含一个文本子节点。不过，也可以让元素包含多个文本子节点，如下面的例 子所示: 

let element = document.createElement("div");
    element.className = "message";
    let textNode = document.createTextNode("Hello world!");
    element.appendChild(textNode);
    let anotherTextNode = document.createTextNode("Yippee!");
    element.appendChild(anotherTextNode);
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
   document.body.appendChild(element);

相关文章