首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Javascript -有没有一种方法可以在不删除子节点的情况下撤销appendChild?

在JavaScript中,可以使用removeChild方法来删除子节点,但是如果想要撤销appendChild操作而不删除子节点,可以使用replaceChild方法。

replaceChild方法可以用于替换一个已存在的子节点。它接受两个参数:新节点和要被替换的节点。通过将新节点作为参数传递给replaceChild方法,可以实现撤销appendChild操作。

以下是一个示例代码:

代码语言:txt
复制
// 创建一个新的子节点
var newChild = document.createElement("div");
newChild.textContent = "新的子节点";

// 获取父节点
var parent = document.getElementById("parent");

// 获取要被替换的节点
var oldChild = document.getElementById("oldChild");

// 使用replaceChild方法替换节点
parent.replaceChild(newChild, oldChild);

在这个示例中,我们首先创建了一个新的子节点newChild,并设置其内容。然后,通过getElementById方法获取父节点parent和要被替换的节点oldChild。最后,使用replaceChild方法将新节点newChild替换掉旧节点oldChild。

这样就实现了在不删除子节点的情况下撤销appendChild操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JavaScript学习总结(七)

JavaScript标签文档可以去百度下载,如果没有也可以加我QQ1247525776跟我要,广交朋友嘛)。 找结点方法 想要找HTML标签共有两种方法。 1....还有一点内容,虽然一般情况下,我们会将标签写在外面,但是执行时候,浏览器会自动将标签挪入标签中, 并且处理文档过程中,会将HTML代码中空文本和注释也当成节点...实际上,节点还有一个nodeType属性,标签对象nodeType均为1,得到所有的节点之后判断一下这个属性就可以了;还有另外一种处理方式,不常用,就不介绍了。..., "属性值") 设置属性 elt.appendChild(e) 添加元素到elt中最后位置 应用如下: 应用这种方法,就可以添加一个按钮了。...注意: elt必须是oldNode直接父节点。 elt.removeChild(child) 删除指定节点 注意: elt必须是child直接父节点

51220

10Node对象

通常情况下parentNode ≈ parentElement,但是特殊情况是元素节点是document对象 获取节点 firstChild 获取指定节点第一个节点 lastChild...解决方案 如果可以判断出什么情况下是空白节点(内容为回车符空白节点)根据空白节点产生情况来进行处理 根据空白节点产生情况来进行处理DOM中空白符 使用getElementByTagName...原生JavaScript只提供了两个方法appendChild() appendChild()方法参数child表示添加节点,同时该节点也是 appendChild0方法返回值。...删除节点 removeChild()方法实现从HTML页面中删除指定节点。 被移除这个子节点仍然存在于内存中,只是没有添加到当前文档DOM树中。 因此,你还可以把这个节点重新添加回文档中。...删除语法有两个: // 第一种:如果只是删除可以不需要赋值变量 var oldChild = node.removeChild(child); // 第二种 element.removeChild(

69030

JavaScript(十)

这个 Node 接口 JavaScript 中是作为 Node 类型实现JavaScript所有节点类型都继承自 Node 类型,因此所有节点类型都共享着相同基本属性和方法。...NodeList 是一种类数组对象,用于保存一组有序节点可以通过位置来访问这些节点。...hasChildNodes() 也是一个非常有用方法,这个方法节点包含一或多个子节点情况下返回 true。...参数为 true 情况下,执行深复制,也就是复制节点及其整个子节点树; 参数为 false 情况下,执行浅复制,即只复制节点本身。...removeAttribute() 方法用于彻底删除元素特性。调用这个方法不仅会清除特性值,而且也会从元素中完全删除特性。

68110

JavaScript理解记录(5)

5、 节点增删:操作文档进行文档节点增加和删除          1、创建节点:document.createElement() 参数为区分大小写标签名(对于HTML),对XML文档会区分大小写...;第二种方法是复制已存在节点,每个节点都有一个cloneNode()方法放回节点副本;          2、插入节点:使用Node方法appendChild()和insertBefore();...               appendChild():插入节点使其成为节点最后一个节点;                  insertBefore():两个参数,第一个参数是待插入节点,...第二个参数是该父节点节点可以为null,为null是功能与appendChild相同;                如果使用以上两个方法再次插入已经存在节点,已存在节点将会自动从它的当前位置删除并在新位置从新插入...,可以用来做单页表格排序等,不改变表格数据,只改变节点顺序;          3、删除和替换节点删除节点:removeChild() 替换节点:replaceChild();

1.4K20

JavaScript笔记(14)

HTMLDOM树中所有节点可以通过JavaScript进行访问,所有html元素(节点)均可以被修改,也可以创建或删除....元素节点 nodeType为1 属性节点 nodeType为2 文本节点 nodeType为3 (文本节点包括文字,空格,换行等) 我们实际开发中,节点操作主要操作是元素节点 利用DOM树可以节点划分为不同层级关系...所以我们可以用另一种方法: parentNode.children(非标准) parentNode.children是一个只读属性,返回所有的元素节点.它只返回元素节点,其余节点返回(这个是我们重点掌握...添加节点 node.appendChild(child) node.appendChild(child)方法将一个节点添加到指定父节点节点列表末尾,类似于CSS中after伪元素,node...自己做: 删除节点 node.removeChild(child) node.removeChild(child)方法从DOM中删除一个节点,返回删除节点.

35520

document对象(DOM)–认识DOM

DOM 将HTML文档呈现为带有元素、属性和文 本树结构(节点树)。 HTML文档可以说由节点构成集合,DOM节点有: 1....说明 childNodes 返回一个数组,这个数组又指定元素节点节点构成 firstChild 返回第一个节点 lastChild 返回最后一个节点 parentNode 返回一个给定节点节点...:alert('创建又一个按钮');") ul_childnodes.appendChild(input2) //appendChild(newnode) 指定节点最后一个节点列表之后添加一个新节点...insertBefore() 方法可在已有的节点前插入一个新节点。...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除

1.6K20

webAPIs04-页面尺寸和位置、时间

获取时间戳 console.log(date.getTime()) // 还有一种获取时间戳方法 console.log(+new Date()) // 还有一种获取时间戳方法 console.log...(Date.now()) 获取时间戳方法,分别为 getTime 和 Date.now 和 +new Date() DOM 节点 掌握元素节点创建、复制、插入、删除等操作方法,能够依据元素节点结构关系查找节点...,传入参数 true 会复制所有节点 appendChild 末尾(结束标签前)插入节点 再来看另一种情形代码演示: 插入节点 现有 dom...复制现有的 DOM 节点,传入参数 true 会复制所有节点 insertBefore 节点中任意节点之前插入新节点 删除节点 删除现有的 DOM 节点,也需要关注两个因素:首先由父节点删除节点...查找节点 DOM 树中任意节点都不是孤立存在,它们要么是父子关系,要么是兄弟关系,不仅如此,我们可以依据节点之间关系查找节点

56810

3-DOM

Node节点对象 节点对象代表文档树中一个节点节点可以是元素节点、属性节点、文本节点,或者也可以是任何一种节点。...注意 虽然所有的对象均能继承用于处理父节点节点属性和方法,但是并不是所有的对象都拥有父节点节点。例如,文本节点不能拥有节点,所以向类似的节点添加节点就会导致 DOM 错误。...方法 对DOM数进行增删改查 appendChild() 向节点节点列表结尾添加新节点。 removeChild() 删除(并返回)当前节点指定子节点。...以上方法和属性虽然都是介绍Node节点,但由于Node节点是其他五种对象父对象,所以其他几种对象都可以使用 删除节点 <a href

1.3K20

前端语言基础【第二篇:JavaScript

JavaScript (一) 基本概述 (1) 概述 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型语言,内置支持类型。...它解释器被称为JavaScript引擎,为浏览器一部分,广泛用于客户端脚本语言,最早是HTML(标准通用标记语言下一个应用)网页上使用,用来给HTML网页增加动态功能 脚本语言:不需要编译,可以直接被浏览器解析执行...("参数列表",方法体和返回值) (7) 全局变量和局部变量 全局变量:script标签里面定义一个变量 这个变量页面中js部分都可以使用 方法外部使用,方法内部使用,另外一个script标签使用...); alert(li3.previousSibling.id); (5) 操作dom树 appendChild方法 添加节点到末尾 特点...appendChild方法末尾添加,剪切黏贴 * 删除节点方法 removeChild方法:通过父节点删除 * 替换节点方法

2.3K20

JavaScript 高级程序设计(第 4 版)- DOM

Node接口JavaScript中被实现为Node类型,除IE之外所有浏览器中都可以直接访问这个类型。...JavaScript中,所有节点类型都继承Node类型,因此所有类型都共享相同基本属性和方法。...(或自己所在)文档所拥有 # 操纵节点 appendChild():用于 childNodes 列表末尾添加节点 添加新节点会更新相关关系指针,包括父节点和之前最后一个节点 appendChild...注释节点可以作为父节点节点来访问 document.createComment()方法创建注释节点,参数为注释文本 浏览器承认结束标签之后注释。...,则该节点会从文档树中移除,不会再被浏览器渲染 可以通过 appendChild()或 insertBefore()方法将文档片段内容添加到文档 把文档片段作为参数传给这些方法时,文档片段所有节点会被添加到文档中相应位置

1.1K30
领券