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

在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);

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

时间: 2024-08-04 01:27:19

js document.createTextNode()创建文本节点详解的相关文章

js replace 与replaceall实例用法详解

这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下   stringObj.replace(rgExp, replaceText) 参数 stringObj 必选项.要执行该替换的 String 对象或字符串文字.该字符串不会被 replace 方法修改. rgExp 必选项.为包含正则表达式模式或可用标志的正则表达式对象.也可以是 String 对象或文字.如果 rgExp 不是正则表达式对象,它将被转换为字符串,并进行精确的查找;不要尝试将字符串

JS JSOP跨域请求实例详解_javascript技巧

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

Node.js 条形码识别程序构建思路详解_node.js

在这篇文章中,我们将展示一个非常简单的方法构建一个自定义的 Node 模块,该模块封装了Dynamsoft Barcode Reader SDK ,支持 Windows.Linux 和 OS X,同时我们将演示如何集成这块模块实现一个在线的条形码读取应用. 越来越多的 Web 开发者选择 Node 来构建网站,因为使用 JavaScript 来开发复杂的服务器端 Web 应用越来越便利.为了扩展在不同平台下的 Node 的功能,Node 允许开发者使用 C/C++ 来创建扩展. 介绍 Dynam

基于js对象,操作属性、方法详解_javascript技巧

一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

jQuery.datatables.js插件用法及api实例详解_jquery

1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "

JS实现的表格操作类详解(添加,删除,排序,上移,下移)_javascript技巧

本文实例讲述了JS实现的表格操作类.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">*{font-size:14px}button{margin

Svg.js实例教程及使用手册详解(一)_javascript技巧

什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 简介: SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画. SVG(Scalable Vector Graphics,可缩放矢量图形)是基

js 传入参数:window &amp; undefined详解

js 传入参数:window & undefined详解 最常见的闭包 (Closure) 范式大家都很熟悉了: (function() { // ... })(); 很简单,大家都在用.但是,我们需要了解更多. 首先,闭包是一个匿名函数 (Anonymous function), 即是 (function() {}) 这部分.之所以要给 function 添加括弧是为了让它形成一个表达式 (expression), 有了表达式,并且确定它的类型是个函数 (Function 实例), 就可以直接

js匿名函数作为函数参数详解_javascript技巧

由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的区别,名字上不知道坑了多少人)也能变通实现. 温故知新,今天又回味了一遍,匿名函数作为函数参数. 代码很短,五脏俱全. <!DOCTYPE html> <html lang="en"> <head> </head> <body>