拆分文本节点splitText()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拆分文本节点splitText()</title>
  <!--
    node.splitText(n);合并文本节点node从索引n开始拆分,包括索引n
    原本的文本节点node会被修改
   -->
</head>
<body>
    <div id="a"></div>
    <script>
      var div=document.getElementById("a");
      var text1=document.createTextNode("我是谁?");
      div.appendChild(text1);
      var text2=div.firstChild.splitText(2);//从索引2开始拆分,包含2
        console.log(text2);//谁?
        console.log(text1);//我是
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/vinson-blog/p/12112770.html

时间: 2024-10-02 04:45:07

拆分文本节点splitText()的相关文章

DOM文本节点TEXT

定义 文本节点由Text类型表示,包含的是纯文本内容,纯文本内容中的HTML字符会被转义. 特征 nodeType:3 nodeName:#text nodeValue:节点所包含的文本 parentNode:Element节点 childNode:没有子节点 <div class="box" id="box">test</div> <script> var oBox = document.getElementById('box'

javascript高级程序设计之文本节点

1.创建文本节点: <script type="text/javascript"> function addNode(){ var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendC

DOM中文本节点索引方法

问题 对于 jquery 接口text()只能取到有标签的 dom对象中 文本内容. 如果索引对象本身就是文本节点,则不好索引到, 没有相关的索引选择器. 例如: 对于<input>aaa 形式的代码, $("input").next().text(), 则不能返回 aaa. 下面有讨论使用jquery索引的方法, 目标是在某个标签下, 找到所有 text node的 对象: http://stackoverflow.com/questions/298750/how-do-

问题:修改文本节点时字符串会经过HTML编码?

今天学JavaScript的DOM时,看到Text属性时,书中有段话: 如果这个文本节点当前存在于文档树中,那么修改文本节点的结果就会立即得到反映.另外,在修改文本节点时还要注意,此时的字符串会经过HTML(或XML,取决于文档类型)编码.换句话说,小于号,大于号或引号都会被转义. 即:div.firstChild.nodeValue = "Some <strong>other</strong> message"; 的输出结果是:"Some <s

初探JavaScript(一)——也谈元素节点、属性节点、文本节点

Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本<Javascript Dom编程艺术>,开始慢慢走近JS,与它套近乎,今天是第三天了,从目前来看,比较好相处.就此动笔,是一个回忆复习的过程,权当是自己的一份读书笔记. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,已经被广泛用于Web应用开发,常用来为网

[ jquery 文档处理 wrapInner(htm|element|fnl) ] 此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹

此方法用于把所有匹配的元素的子元素(包括文本节点)使用指定的 HTML 元素来包裹 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来 这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的),并在它的代码结构中找到最上层的祖先元素--这个祖先元素就是包装元素 html HTML标记代码字符串,用于动态生成元素并包装目标元素 element 用于包装目标元素的DOM元素 fn 生成包裹结构的一个函数 实例: <html lang='zh-cn'> &l

DOM中元素节点、属性节点、文本节点的理解

转自:http://www.cnblogs.com/dh616854836/archive/2011/08/14/2138038.html 节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文

JS获取文本节点

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <titl

DOM中元素节点,属性节点,文本节点的理解

节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可返回节点的类型. 最重要的节点类型是: 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 在实际应用中,经常用到的就是元素节点.属性节点和文本节点了,下面我们通过小段代码进行讲解 1:元素节点 <HEAD> <TITLE>空谷悠悠</TITLE> <