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

js 专栏收录该内容
7 篇文章 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);

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

  • 2
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值