关于appendChild方法的一些问题

最新推荐文章于 2023-10-24 20:14:56 发布

最新推荐文章于 2023-10-24 20:14:56 发布 · 513 阅读

文章标签：

#javascript #c/c++ #ViewUI

本文通过一个具体示例，详细解析了appendChild方法的工作原理及其如何影响DOM结构。特别关注了元素在不同节点间移动时，parentNode属性的变化，澄清了可能产生的死循环误解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

所以不会有死循环问题