javascript中使用appendChild来移动一个节点

最新推荐文章于 2021-06-05 01:10:08 发布
最新推荐文章于 2021-06-05 01:10:08 发布
阅读量149 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jppartner/archive/2010/07/08/1773636.html
版权

以前在javascript中移动一个节点的时候，基本的步骤都是：比如从A移动到B，在A中获取该节点，克隆该节点，然后使用appendChild添加到B中，最后在A中删除该节点。今天在看书的时候发现，其实apendChild已经为我们做了最后的一步remove的操作，当把一个已经存在与文档中的的元素append到某个节点时，他会先从原来的节点中删除，然后再被添加到指定的节点上。 所以我们如果想移动一个节点，只要获得该节点的引用，然后直接appendChild就可以了，无需Clone和Remove操作。

转载于:https://www.cnblogs.com/jppartner/archive/2010/07/08/1773636.html

weixin_33726943
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个页面元素appendchild追加到另一个页面元素的问题
09-05
在JavaScript中，`appendChild`是一个非常基础且常用的方法，它用于将一个节点添加为指定父节点的最后一个子节点。当你提到“一个页面元素appendChild追加到另一个页面元素的问题”，实际上涉及的是DOM（Document ...
JavaScript中的appendChild（）方法
热门推荐
每天学习一点点
12-01 8万+
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。 实例一： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> &lt
JavaScipt中的appendChild()方法
deiku_izuku的博客
05-24 1396
appendChild()方法是向节点添加最后一个子节点。也可以使用此方法从一个元素向另一个元素移动元素。可以用在列表的添加操作中。我主要以ul li列表举例：这片代码是用于向列表中添加项的操作，主要的步骤是：1，用var node = createElement("li")创建相应节点2，获得要输入的信息内容text3，利用var add = node.createTextNode(text)来...
html里面append一段代码,HTML DOM appendChild()用法及代码示例
weixin_28843191的博客
06-05 1120
appendChild()方法用于创建文本节点作为该节点的最后一个子节点。此方法还用于将一个元素从一个元素移动到另一个元素。它用于创建带有一些文本的新元素，然后首先将文本创建为文本节点，然后将其附加到元素，然后将元素附加到文档。用法:node.appendChild( node )参数：该方法接受强制性的单参数节点，用于指定需要附加的节点对象。范例1：DOM appendChild() Metho...
appendChild 函数
liuyj_vv的博客
10-10 4391
appendChild() 方法向节点添加最后一个子节点。 appendChild() 方法从一个元素向另一个元素中移动元素。 <body> <button onclick="test1()">test1</button> <button onclick="test2()">test2</button> <butt...
javascript 变态的节点集合
12-11
首先，`NodeList`是JavaScript中一个重要的概念，它是一个动态的节点列表，通常通过DOM方法如`getElementsByTagName`, `getElementsByClassName`或`querySelectorAll`获取。`NodeList`并不是真正的数组，尽管它可以...
appendChild() 或 insertBefore()使用与区别介绍
09-04
例如，在一个有多个`<p>`元素的`<div id="test"></div>`中，如果我们想要在特定的`<p>`元素之前插入新节点，我们可以使用`insertBefore()` 方法。 在实际应用中，选择`appendChild()` 还是`insertBefore()` 取决于...
javascript select控件间内容互相移动
10-29
这些函数的核心操作是`appendChild()`方法，它是DOM操作的一部分，用于将一个节点添加到另一个节点的子节点列表末尾。在本例中，`appendChild()`用于在`select`控件之间移动`option`元素。 为了使用这些功能，用户...
javascript学习笔记(十九) 节点的操作实现代码
12-07
在本篇JavaScript学习笔记中，我们主要探讨了如何通过JavaScript来创建、添加、移除和操作HTML元素节点。 首先，我们了解了如何创建元素节点。`document.createElement()` 是一个非常重要的方法，它允许我们动态...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2985
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
JS中appendChild(Node)方法 追加or移动
张志勇的博客
07-23 1138
这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接移动节点。 下面是一个实例： ` <title>表格排序</title> <style> table{ margin:0 auto; width:400p...
js拾遗：appendChild 添加移动节点
weixin_33693070的博客
05-23 144
写js一年多了，一直以为自己很牛逼，开始写各种博文分享，昨天写了一篇《浅谈 IE下innerHTML导致的问题》在看了下面的评论，我才发现自己是多么无知。于是我回头翻阅了下 MDN，Node.appendChild 里面一开始就明确说了，“如果该节点已经存在，则从当前父节点中删除，然后添加到新的父节点。”简单来说就是移动当前节点的意思，所以昨天的代码里去掉 obox.innerHTML = "";...
js中appendChild()方法
优雅的博客
11-24 3万+
appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。      ① 创建原来没有的节点 苹果 香蕉 橘子 window.onload = function(){ //定义一个快捷方式 function $(name){ return
fragment.appendChild()的移动性
True_Rain
10-12 444
请看一下代码 把节点移动到内存中的封装函数 node2fragment(node) { let fragment = document.createDocumentFragment();//创建一个文档碎片 let firstChild; while (firstChild = node.firstChild) { fragment.appendChil...
appendChild()的定义和用法
TTTiaotiao的博客
08-03 4519
appendChild() 方法向节点添加最后一个子节点。 提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。 您也可以使用 appendChild() 方法从一个元素向另一个元素中移动元素。 ...
移动应用开发复习关键点：HTML, CSS, JavaScript与表单
移动互联应用开发是一个涵盖广泛的领域，主要涉及在移动设备上构建应用程序的技术。这份复习提纲侧重于前端开发的基础知识，特别是HTML、CSS和JavaScript，这些都是移动应用开发不可或缺的部分。 HTML（HyperText ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值