appendChild方法会改变node的parentNode
看下面的一个例子
function insertBefore(html,targetElement,callback)
{
var pNode = targetElement.parentNode;
var temp = document.createElement("div");
temp.innerHTML = html;
var frag = document.createDocumentFragment();
(function(){
if(temp.firstChild){
frag.appendChild(temp.firstChild);
//temp.removeChild(temp.firstChild);
setTimeout(arguments.callee,0);
}else{
pNode.insertBefore(frag,targetElement);
if(callback){
callback();
}
}
})()
}
注意注释的部分
有的觉得里面会产生死循环
应该一直都在取temp的firstChild，感觉firstChild一直没有改变
但是其实元素被append到另外一个节点上之后，他的parentNode已经不是temp了
那么等于说temp的firstChild已经没有了，变成下一个节点了
所以不会有死循环问题
相关推荐
在 JavaScript 中，appendChild 和 insertBefore 是两个常用的方法，用于在 DOM 中插入新的节点。但是，很多开发者对这两个方法的使用和区别不是很清楚，本文将详细解析这两个方法的用法和区别。 appendChild 方法 ...
### JavaScript原生appendChild方法的Bug解决心得 #### 一、问题背景 在Web开发中，经常需要通过JavaScript来动态操作DOM元素，其中`appendChild`是一个非常常用的方法，用于将一个节点添加到另一个节点的子节点...
在处理框架页面间交互时，JavaScript的`appendChild()`方法是一个非常实用的工具，它允许我们在DOM（文档对象模型）中添加新的元素。本篇文章将详细探讨如何在框架页面之间使用`appendChild()`。 首先，理解`...
在jQuery中，`append()`和`appendTo()`方法与原生的`appendChild`类似，但有一些关键区别。`append()`方法接受一个HTML字符串或jQuery对象作为参数，并将其添加到选中的元素内部。例如： ```javascript $('#a')....
appendChild方法是在父级节点中的子节点的末尾添加新的节点（相对于父级节点 来说）。 insertBefore 方法 是在已有的节点前添加新的节点（相对于子节点来说的）。 来看个这个简单的实例：在id为box-co
然而，在处理类似DOM列表元素时，直接使用`appendChild()`可能会遇到一个“bug”，即在遍历列表元素并尝试使用`appendChild()`方法移除它们时，由于DOM结构的变化，可能会引发意外行为。 首先，让我们弄清楚`...
当你提到“一个页面元素appendChild追加到另一个页面元素的问题”，实际上涉及的是DOM（Document Object Model）操作，这是网页动态内容的基础。 首先，`appendChild`方法的工作原理是将调用该方法的元素作为父节点...
本文将详细介绍appendChild方法的使用和一个具体实例。 首先，我们需要了解DOM和节点的概念。在HTML文档中，每一个元素、属性甚至文本都可以视为节点。而DOM则是将这些节点以树状结构组织起来，方便JavaScript进行...
- 数组`join()`和`innerHTML`的结合在某些情况下可能比单独使用`innerHTML`稍微高效一些，因为它避免了多次调用`innerHTML`，但总体上仍然不如`appendChild()`。 实际应用中，选择哪种方法取决于具体场景。如果需要...
总结一下，`append`和`appendTo`是jQuery提供的方便的添加内容的工具，主要用于DOM元素的动态构建，而`appendChild`是原生JavaScript的方法，用于在元素的子节点列表末尾添加新的或已存在的子节点。在使用这些方法时...
在这部分工作中，最常使用的两个方法就是appendChild()和insertBefore()。尽管这两个方法都用于向文档中添加节点，但它们之间的使用方式及细节存在一些差异。 appendChild()方法是最基本的添加节点方法，它的作用是...
在网页开发中，DOM（Document Object Model）是用于表示HTML或XML文档的树形...在实际的网页开发中，结合使用这些方法以及`createElement()`和`appendChild()`等其他DOM操作方法，可以实现各种复杂的动态效果和功能。
那么appendChild方法执行的不再 是append操作了,而是一个move操作. 比如说: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]因为btn1本身是dom 中的一个节点,所以 appendChild操作会将 btn1 移动到 btn4...
写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到...3、用appendChild方法,将元素追加到某个标签内容中！ TemO.appendChild(newInput); Javascrip核心代码： <sc
- **`appendChild`方法**：这是一个DOM操作方法，用于将一个节点添加到指定父节点的子节点列表的末尾。 - **无缝滚动**：指在页面上展示的内容能够平滑地循环播放，给人一种连续不断的感觉。 - **走马灯效果**：源自...
`appendChild()` 和 `insertBefore()` 是两个非常重要的方法，用于在已有节点的子节点列表中添加新节点。 `appendChild()` 方法用于将一个节点添加到指定父节点的子节点列表的末尾。这意味着新节点始终会被放置在...