添加、删除、插入和替换[文本节点]

最新推荐文章于 2023-01-20 15:15:45 发布
最新推荐文章于 2023-01-20 15:15:45 发布
阅读量1.2k 收藏
点赞数
分类专栏： JS JQ 文章标签： function javascript action div input html

原帖地址


添加、删除、插入和替换[文本节点]

    

    一、何谓节点？ 
     页面元素是按树形结构布置的，树形结构的每个部分称为一个节点，节点中含有子节点，节点的终极是文本或图像，对文本而言称为“文本节点”，其他节点统称称“元素节点”。 
     二、通过表单添加节点实例： 
     节点位于body中，没有事先创建一个可以避免干扰的全新div区域。 
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Adding Nodes</title>
     <script language="javascript" type="text/javascript">
     window.onload = initAll;
     function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = addNode;//对第一个表单的按钮定义onsubmit事件 
     }
     function addNode() {
     var inText = document.getElementById("textArea").value;//通过id获取表单中文本区域的值 
     var newText = document.createTextNode(inText);//创建一个文本节点，括号中inText是文本的内容 
     var newGraf = document.createElement("p");//创建一个元素节点p
     newGraf.appendChild(newText);//将上述文本节点置入p元素节点之中 
     var docBody = document.getElementsByTagName("body")[0];//定义body元素对象为第一个body元素 
     docBody.appendChild(newGraf);//将元素p置入body元素当中 
     return false;
     }
     </script>
     </head>
     <body>
     <form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <input type="submit" value="Add some text to the page" />
     </form>
     </body>
     </html>
     注意：使用上述方法添加节点不会导致页面无效，而使用innerHTML赋值方法可能导致页面无效。 
     三、添加和删除文本节点实例。 
     通过表单按钮事件（onsubmit）添加节点，再通过链接点击（onclick）删除节点实例，此例没有创建全新区域div。 
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Deleting Nodes</title>
     <script language="javascript" type="text/javascript">
     window.onload = initAll;
     function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = addNode;
     document.getElementById("deleteNode").onclick = delNode;
     }
     function addNode() {
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     var docBody = document.getElementsByTagName("body")[0];
     docBody.appendChild(newGraf);
     return false;
     }
     function delNode() {
     var allGrafs = document.getElementsByTagName("p");
     if (allGrafs.length > 1) {
     var lastGraf = allGrafs.item(allGrafs.length-1);//因为是从0开始的，所以最后一个p元素是allGrafs.length-1
     var docBody = document.getElementsByTagName("body")[0];
     docBody.removeChild(lastGraf);//删除最后一个p元素 
     }
     else {
     alert("Nothing to remove!");
     }
     return false;
     }
     </script>
     </head>
     <body>
     <form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <input type="submit" value="Add some text to the page" />
     </form>
     <a id="deleteNode" href="#">Delete last paragraph</a>
     </body>
     </html>
     四、创建全新区域来添加和删除特定文本节点实例。 
     事先在body中创建一个全新div区域，并设其id= modifiable以便javascript调用。 
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Deleting Selected Nodes</title>
     <script language="javascript" type="text/javascript">
     window.onload = initAll;
     var nodeChgArea;
     function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
     nodeChgArea = document.getElementById("modifiable");//获取div元素对象 
     }
     function addNode() {
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     nodeChgArea.appendChild(newGraf);
     }
     function delNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;//当前选择的项目 
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);
     nodeChgArea.removeChild(oldGraf);
     }
     function nodeChanger() {
     var actionType = -1;
     var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
     var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
     for (var i=0; i<radioButtonSet.length; i++) {
     if (radioButtonSet[i].checked) {
     actionType = i;
     }
     }
     switch(actionType) {
     case 0:
     addNode();
     break;
     case 1:
     if (pGrafCt > 0) {
     delNode();
     break;
     }
     default:
     alert("操作不正确");
     }
     document.getElementById("grafCount").options.length = 0;
     for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {
     document.getElementById("grafCount").options[i] = new Option(i+1);
     }
     return false;
     }
     </script>
     </head>
     <body>
     <form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <p><label><input name="nodeAction" type="radio"/>
     添加节点</label>
     <label><input type="radio" name="nodeAction" />删除节点</label></p>
     Paragraph #: <select id="grafCount"></select>
     <input type="submit" value="Submit" /></form>
     <div id="modifiable"></div>
     </body>
     </html>
     五、添加、删除及插入文本节点实例。 
     事先要创建一个全新区域div，并定义其id= “modifiable”。 
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Inserting Nodes</title>
     <script language="javascript" type="text/javascript">
     window.onload = initAll;
     var nodeChgArea;
     function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
     nodeChgArea = document.getElementById("modifiable");
     }
     function addNode() {
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     nodeChgArea.appendChild(newGraf);
     }
     function delNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);
     nodeChgArea.removeChild(oldGraf);
     }
     function insertNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);
     nodeChgArea.insertBefore(newGraf,oldGraf);
     }
     function nodeChanger() {
     var actionType = -1;
     var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
     var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
     for (var i=0; i<radioButtonSet.length; i++) {
     if (radioButtonSet[i].checked) {
     actionType = i;
     }
     }
     switch(actionType) {
     case 0:
     addNode();
     break;
     case 1:
     if (pGrafCt > 0) {
     delNode();
     break;
     }
     case 2:
     if (pGrafCt > 0) {
     insertNode();
     break;
     }
     default:
     alert("操作不正确");
     }
     document.getElementById("grafCount").options.length = 0;
     for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {
     document.getElementById("grafCount").options[i] = new Option(i+1);
     }
     return false;
     }
     </script>
     </head>
     <body>
     <form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <p><label><input type="radio" name="nodeAction" />添加节点</label>
     <label><input type="radio" name="nodeAction" />删除节点</label>
     <label><input type="radio" name="nodeAction" />插入节点在某个节点之前</label></p>
     Paragraph #: <select id="grafCount"></select>
     <input type="submit" value="Submit" />
     </form>
     <div id="modifiable"> </div>
     </body>
     </html>
     六、添加、删除、插入和替换文本节点。 
     事先要创建一个全新区域div，并定义其id= “modifiable”。 
     <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
     <title>Replacing Nodes</title>
     <script language="javascript" type="text/javascript">
     window.onload = initAll;
     var nodeChgArea;
     function initAll() {
     document.getElementsByTagName("form")[0].onsubmit = nodeChanger;
     nodeChgArea = document.getElementById("modifiable");
     }
     function addNode() {
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     nodeChgArea.appendChild(newGraf);
     }
     function delNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);
     nodeChgArea.removeChild(oldGraf);
     }
     function insertNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);
     nodeChgArea.insertBefore(newGraf,oldGraf);
     }
     function replaceNode() {
     var grafChoice = document.getElementById("grafCount").selectedIndex;
     var inText = document.getElementById("textArea").value;
     var newText = document.createTextNode(inText);
     var newGraf = document.createElement("p");
     newGraf.appendChild(newText);
     var allGrafs = nodeChgArea.getElementsByTagName("p");
     var oldGraf = allGrafs.item(grafChoice);
     nodeChgArea.replaceChild(newGraf,oldGraf);
     }
     function nodeChanger() {
     var actionType = -1;
     var pGrafCt = nodeChgArea.getElementsByTagName("p").length;
     var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;
     for (var i=0; i<radioButtonSet.length; i++) {
     if (radioButtonSet[i].checked) {
     actionType = i;
     }
     }
     switch(actionType) {
     case 0:
     addNode();
     break;
     case 1:
     if (pGrafCt > 0) {
     delNode();
     break;
     }
     case 2:
     if (pGrafCt > 0) {
     insertNode();
     break;
     }
     case 3:
     if (pGrafCt > 0) {
     replaceNode();
     break
     }
     default:
     alert("操作不正确");
     }
     document.getElementById("grafCount").options.length = 0;
     for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {
     document.getElementById("grafCount").options[i] = new Option(i+1);
     }
     return false;
     }
     </script>
     </head>
     <body>
     <form action="#">
     <p><textarea id="textArea" rows="5" cols="30"></textarea></p>
     <p><label><input type="radio" name="nodeAction" />添加文本</label>
     <label><input type="radio" name="nodeAction" />删除文本</label>
     <label><input type="radio" name="nodeAction" />在第··段前插入文本</label>
     <label><input type="radio" name="nodeAction" />替换文本</label></p>
     Paragraph #: <select id="grafCount"></select>
     <input type="submit" value="Submit" />
     </form>
     <div id="modifiable"> </div>
     </body>
     </html>


hunter_wyg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现添加,替换,删除节点元素的方法
11-22
在JavaScript中，对DOM的操作通常涉及到获取元素（`getElementById`、`querySelector`等）、创建新元素（`createElement`）、修改元素属性（`setAttribute`）、以及对节点进行添加、替换和删除。熟练掌握这些操作...
文本节点和属性节点内容替换
truman2011的博客
01-13 596
nodeType属性总共有12种可取值，其中只有3种具有实用价值  a.  元素节点的nodeType属性值是1.  b.   属性节点的nodeTyoe属性值是2.  c.   文本节点的nodeType属性值是3. 测试demo Image Gallery Snapshots Fireworks
添加 删除 替换 插入到某个接点的方法
W1254667的博客
01-20 108
obj.appendChid()obj.insertBefore()obj.replaceChild()obj.removeChild()
js节点的添加 删除 插入 替换
DDD_Yi的博客
10-07 622
一.创建元素节点createElement添加节点 node.appendChild(child) -->node父级 child 子级 元素追加到最后面 效果图 二.插入节点insertBeforenode.insertBefore(child,指定元素)-->node父级 child 子级 效果图 三.删除节点node.removeChild(child)-->node父级 child 子级 四.替换节点 父级.replac...
清除html空白节点,如何剔除掉无用的空白文本节点呢？
weixin_36062835的博客
07-01 389
无标题文档javascriptjavascriptjQueryPHPvar D = document.getElementsByTagName("div");var D1 = D[0];var D1child = D1.childNodes;document.write("第一个div节点的子节点共有"+D1child.length+"个");for(var i=0;i{document.writ...
添加、删除、替换、插入到某个节点的方法（js、jq）
weixin_42855542的博客
11-04 9873
首先说下，具体用得到的方法： js： appendChild() //添加 removeChild() //删除节点 insertBefore（插入节点，被插节点） //插入（前插后） replaceChild（新节点,旧节点） //替换（前替换后） jq： append() （旧节点添加新节点后面） appendTo() （新节点添加到旧节点后面） prepend() （旧节...
javaScript(JS)替换节点实现思路介绍
10-27
它通过`document.createElement()`创建一个`<p>`元素，然后使用`document.createTextNode()`创建一个文本节点，并用`appendChild()`方法将文本节点添加到`<p>`元素中，最后将`<p>`元素添加到`<body>`。 2. `r()`：...
如何在指定的地方插入html内容和文本内容
09-04
与`innerHTML`不同，`innerHTML`会替换元素内所有子节点，而`insertAdjacentHTML`和`insertAdjacentText`则是在原有内容的基础上进行添加。 此外，`innerHTML` 属性是可读写的，用于获取或设置元素的HTML内容。例如...
JS简单添加元素新节点的方法示例
10-18
总的来说，这个示例提供了JavaScript操作DOM元素的基本方法，包括创建、添加、插入和克隆节点，这些都是构建动态网页的关键技能。通过理解并实践这些方法，开发者能够更加灵活地控制网页的动态表现。
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
本文主要介绍JavaScript中的DOM插入、更新和删除操作。 **1. DOM更新** 更新DOM节点主要包括修改文本内容和修改CSS样式。 - **修改文本内容** - `innerHTML`：这是最常用的方法，可以改变节点内部的HTML内容，...
添加、删除、替换以及插入节点的方法
liyongchunscr的博客
09-06 1510
添加、删除、替换以及插入节点的方法 先简单说下每个方法对应的语句和用法 obj.appendChild(node)　　把新的子节点添加到指定节点（插入新的子节点（元素）），这么说可能不是很明白，代码可能更清晰哈！node表示的就是要添加的节点。 1 // 获取元素 2 var div=document.getElementById("div1"); 3 // 创造元素，给元素添加些文字 4 var p=document.createElement("p")
js DOM节点的创建、插入、删除、查找、替换例子
超级书虫
01-20 7678
DOM节点是我们前端人员必须要了解并撑握的一个知识点了，下面我来介绍一些节点的创建、插入、删除、查找、替换操作方法，希望这些方法来帮助到各位同学哦。 在前端开发中，js与html联系最紧密的莫过于对DOM的操作了，本文为大家分享一些DOM节点的基本操作。
jquery删除，添加，替换，复制节点的几种常用方法
Warren技术宅的专栏
11-07 1602
//几种添加节点的方法      //$("p").append("你好吗？");//向p元素中追加《b》      //$("你好吗？").appendTo("p");//将《b》追加到p元素中      //$("p").prepend("你好吗？");//向p中前置《b》      //$("你好吗？").prependTo("p");//将《b》前置到p元素中      //$(
javascript 原生方法对dom节点的操作，创建、添加、删除、替换、插入、复制、移动等操作
代码一身
10-21 9987
创建节点添加
js怎样添加、移除、移动、复制、创建和查找节点
热门推荐
webZRH的博客
04-16 1万+
参考：http://www.w3school.com.cn/xmldom/dom_nodes_get.asp （1）创建新节点      var para=document.createElement("p"); //创建新的 元素 var node=document.createTextNode("这是新段落。"); //创建了一个文本节点 para.appendChild(
js 添加 移除 替换 插入
唯一轩
11-06 1017
添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 window.onload=function(){ // var box=document.getElementById("box"); //添加 appendChild() 先用createEle
节点的操作 创建、添加、移除、移动、复制
kungfu_panda的专栏
08-24 1971
（1）创建新节点 createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元
删除空白文本节点
zyy_0725的博客
09-04 1765
var oUl = document.getElementById("ul1"); //获取ul节点 deleteSpace(oUl); //传入父节点，删除它子节点中的空白文本节点 function deleteSpace(node){ var childs = node.childNodes; for(var i = 0;i if(childs[i].nodeType =
DOM怎样添加、移除、移动、复制、创建和查找节点
最新发布
06-08
5. 创建节点：使用createElement()方法创建一个新的元素节点，或者使用createTextNode()方法创建一个新的文本节点。 6. 查找节点：使用getElementById()方法根据节点ID查找节点，或者使用getElementsByTagName()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值