`
李俊良
  • 浏览: 142266 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于appendChild方法的一些问题

 
阅读更多

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已经没有了,变成下一个节点了

所以不会有死循环问题

分享到:
评论

相关推荐

    初学js插入节点appendChild insertBefore使用方法

    appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。 insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。 来看个这个简单的实例:在id为box-co

    JS中appendChild追加子节点无效的解决方法

    主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习

    javascript appendChild,innerHTML,join性能比较代码

    代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 ... <head> <title>appendChild,innerHTML,join</title> [removed]<...– //使用appendChild()方法添加span标签 function AppendD

    由 element.appendChild(newNode) ,谈开去

     那么appendChild方法执行的不再 是append操作了,而是一个move操作. 比如说: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]因为btn1本身是dom 中的一个节点,所以 appendChild操作会将 btn1 移动到 btn4...

    javascript实现的动态添加表单元素input,button等(appendChild)

    写一个小系统时,需要动态添加表单元素,按自己的实现方法写了这篇教程! 我想各位在很多网站上都看到...3、用appendChild方法,将元素追加到某个标签内容中! TemO.appendChild(newInput); Javascrip核心代码: <sc

    appendChild() 或 insertBefore()使用与区别介绍

    document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意...

    javascript使用appendChild追加节点实例

    主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下

    append和appendTo的区别以及appendChild用法

    appendChild(Node)这个 方法一般是在指定元素节点的最后一个子节点之后添加节点 但如果Node是页面中的DOM对象,那么就不是添加节点了,就是直接Move节点。 appendChild你可以理解为移动一个元素。如果想复制一份...

    谷歌浏览器 insertCell与appendChild的区别

    而使用appendChild方法增加列,显示结果的先后顺序与程序执行的先后顺序相同 详细可以执行以下代码: 代码如下:<html> [removed]<!– function generatable(){ var tableObje = document.getElementById(...

    jQuery学习之DOM节点的插入方法总结

    append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似。 appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。 ...

    js利用appendChild对<li>标签进行排序的实现方法

    下面小编就为大家带来一篇js利用appendChild对标签进行排序的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JavaScript之appendChild、insertBefore和insertAfter使用说明

    几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结

    开网页的时候总是弹出InternetExplorer无法打开Internet站点.pdf

    Internet Explorer是一款广泛使用的浏览器,但是它也存在一些问题,例如无法打开Internet站点的问题。 解决方法一:清空浏览器缓存文件 首先,清空浏览器缓存文件,在Internet Explorer的工具菜单里选择Internet...

    Internet Explorer无法打开Internet站点.docx

    为了解决该问题,需要了解导致该问题的原因,并采取相应的解决方法。 首先,让我们了解导致 IE 无法打开 Internet 站点的可能原因: 1. 对 IE 的使用过程中的某些修改,例如修改安全级别、主页、默认语言等。 2. ...

    仿GOOGLE下拉提示框方法

    页面onload后调用(因为有body.appendChild方法) var mySuggest = new hansir.TextSuggest(); mySuggest.add_suggest(inp, url, method, defer, defer2); 除了前两项必填,后三项都是可选的 inp :输入框ID名。 ...

    【ASP.NET编程知识】asp.net简单生成XML文件的方法.docx

    "ASP.NET 简单生成 XML 文件的方法" ASP.NET 中生成 XML 文件是非常常见的操作,今天我们将介绍两种生成 XML 文件的方法,并对相关知识点进行详细解释。 方法一:使用 DataSet 生成 XML 文件 在 ASP.NET 中,我们...

Global site tag (gtag.js) - Google Analytics