首页 > 编程语言 >js 创建文本节点 document.createTextNode()

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

时间:2024-01-23 14:03:12浏览次数:37  
标签:document js element let div 文本 节点 createTextNode

示例中的第一个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);

标签:document,js,element,let,div,文本,节点,createTextNode
From: https://blog.51cto.com/u_16298172/9379083

相关文章

  • JS、HTML内嵌iframe第三方网页,如何通信?
    在实际使用postMessage时,如果你不确定确切的父页面或子页面的源地址(即origin),可以采取以下策略:允许任意源发送消息:如果你希望iframe子页面能够向任何父页面发送消息,或者父页面接受来自任何域的iframe消息,可以在调用postMessage时将目标源设置为通配符*://子页面向任意源发送windo......
  • 自我记录js正则
    一、数字相关只有数字:/^[0-9]*$/或/^\d{1,}$/整数:/^-?[0-9]\d*$/正整数:/^\+?[1-9]\d*$/非正整数:/^-[1-9]\d*|0$/负整数:/^-[1-9]\d*$/非负整数:/^\d+$/浮点数:/^(-?\d+)(\.\d+)?$/正浮点数:/^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/负浮点数:/^-([1-9]\d*\.\d*|......
  • OPENJSON requires Compatibility Level 130
    ParseandTransformJSONDatawithOPENJSONOPENJSONrequiresCompatibilityLevel130TheOPENJSONfunctionisavailableonlyundercompatibilitylevel130.Ifyourdatabasecompatibilitylevelislowerthan130,SQLServercan'tfindandruntheO......
  • js中的bigint类型转化为json字符串时报无法序列化的问题
    网上查了一下,解决这个问题的思路就是将bigint类型的数据转化为字符串,这样就能正确转化为json字符串了。对于一个是bigint的变量,直接使用toString方法就可以转化为字符串了,但是bigint变量在一个对象中,那么我们就需要一个更加通用的方法,网上看到一个很好的封装好的方法,如下。expor......
  • [转]js 正则相关的两个方法match和exec的区别
    原文地址:jsmatch和exec的区别_javascriptmatchexec-CSDN博客一、使用方法不同exec()是正则对象的方法;reg.exec(str);match()是字符串的正则表达方法;str.match(reg);二、返回结果不同w3cSchool是这么说的:match()方法将检索字符串stringObject,以找到一个或多个与regex......
  • Java开发者的Python进修指南:JSON利器之官方json库、demjson和orjson的实用指南
    JSONJSON作为目前最流行的传输格式,在Python中也有相应的实现方式。由于JSON格式的文本可以跨平台并且简单易用,因此被广泛传播。因此,我们今天的主要讨论内容是如何熟练地应用Python的JSON库来处理将JSON映射到文本,以及如何从文本映射到对象中。现在,让我们开始探讨这个话题。官方j......
  • 某建筑网页js逆向分析过程(有坑)
    某建筑网页js逆向分析过程(有坑)https://blog.csdn.net/ak_bingbing/article/details/134399056 acmakb于2023-11-1414:56:27发布阅读量709收藏点赞数4分类专栏:网络爬虫文章标签:javascript爬虫python版权网络爬虫专栏收录该内容20篇文章0订阅订阅专栏某建筑网......
  • crypto-js 加密、解密使用方法
    crypto-js加密、解密使用方法爱宇阳于2021-12-1015:35:32发布阅读量5.9w收藏201点赞数38分类专栏:VueJavaScriptHTML5文章标签:javascript前端vue.js版权华为云开发者联盟该内容已被华为云开发者联盟社区收录加入社区Vue同时被3个专栏收录81篇文章9订阅订阅......
  • JS 数字字符串补零
    有时为了格式美观,我们需要给数字统一格式,比如001,002,003,这就有了为数字补足0的需求。具体见代码//num:数字//fill:补足后的位数padNumber(num,fill){letlen=(''+num).length;if(fill>len){//新建一个空数组,长度为所缺位数+1,利用join(0),得......
  • 复杂JSON数据的扁平化解析_Java实现
    在工作中遇到了解析JSON数据的场景,但是此岗位传统的做法是通过Python脚本来实现的,而且是非常不合理的手动解析——每对应不同的JSON数据结构,都需要手动改动很多脚本文件,工作量与JSON数据结构的复杂程度成正比!(很难想象这是一个做开发的人想出来的方案)因此最开始接触此工作内容的时......