js document.createTextNode()创建文本节点详解

最新推荐文章于 2024-01-23 09:58:08 发布

somnus_ly

最新推荐文章于 2024-01-23 09:58:08 发布

阅读量2.1k

点赞数 1

分类专栏： js小结文章标签： createNode

17 篇文章 0 订阅

订阅专栏

在Javascript中，可以创建各种类型的节点。

下面列出常用的创建节点的方法：

方法说明

createElement() 创建一个元素节点
createTextNode() 创建一个文本节点
createComment() 创建一个文本节点
createDocumentFragment() 创建文档碎片节点

以上四种方法都是 document 对象的方法。

createElement()createElement()用来创建一个元素节点，即 nodeType=1 的节点。

语法：
document.createElement(tagName)
其中，tagName 为HTML标签的名称，并将返回一个节点对象。

例如，创建<div>标签和<p>标签的语句如下：

代码如下
var ele_div=document.createElement("div"); var ele_p=document.createElement("p");createTextNode()createTextNode()

用来创建一个注释节点，即 nodeType=8 的节点。

语法：

document.createComment(comment)

其中，comment 为注释的内容，并将返回一个节点对象。

例如，创建一个注释节点，内容为“ 这是一个注释节点 ”：

代码如下
var ele_comment=document.createComment(" 这是一个注释节点 "); createDocumentFragment()createDocumentFragment()

用来创建文档碎片节点。

文档碎片节点是若干DOM节点的集合，可以包括各种类型的节点，如元素节点、文本节点、注释节点等。文档碎片节点在创建之初是空的，需要向它添加节点。

语法：

document.createDocumentFragment();

例如，创建一个文档碎片节点，并将它赋值给变量：

代码如下
var ele_fragment=document.createDocumentFragment();

可以使用document.createTextNode()创建新文本节点，这个方法接受一个参数——要插入节点中的文本。与设置已有文本节点的值一样，作为参数的文本也将按照HTML或XML的格式进行编码：

代码如下
var textNode = document.createTextNode("<strong>Hello</strong> world!");

在创建新文本节点的同时，也会为其设置ownerDocument属性。不过，除非把新节点添加到文档树中，否则我们不会在浏览器窗口中看到新节点。下面的代码会创建一个<div>元素并向其中添加一条消息：

代码如下
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element);

这个例子创建了一个新<div>元素并为它指定了值为“message”的class特性。然后，又创建了一个文本节点，并将其添加到前面创建的元素中。最后一步，就是将这个元素添加到了文档中的<body>元素中，这样可以在浏览器中看到新创建的元素和文本节点了。

一般情况下，每个元素只有一个文本子节点。不过，在某些情况下也可能包含多少个文本子节点，如下面的例子所示：

代码如下
var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); var anotherTextNode = document.createTextNode("Yippee!"); element.appendChild(anotherTextNode); document.body.appendChild(element);

如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格