您的位置：首页 > Web前端 > Node.js

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

2013-09-23 11:48 736 查看
在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);
如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航