appendChild 函数_appendchild()函数-优快云博客

本文链接：https://blog.youkuaiyun.com/liuyj_vv/article/details/102477304

这篇博客详细介绍了JavaScript中的appendChild()方法，该方法用于向节点添加新的子节点或移动已有子节点。文章强调了在使用过程中需要注意新创建的元素与已存在的元素的区别，以及在移动元素时可能影响原位置节点的问题，提醒开发者在使用时考虑是否需要复制节点。

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

appendChild() 方法向节点添加最后一个子节点。
appendChild() 方法从一个元素向另一个元素中移动元素。

	<body>
		<button onclick="test1()">test1</button>
		<button onclick="test2()">test2</button>
		<button onclick="test3()">test3</button>

		<div id="div" style="border: 1px solid blue;">
			<button> div1-span1 </button>
			<button> div1-span2 </button>
			<button> div1-span3 </button>
		</div>
		
		<div id="div2" style="border: 1px solid red;">
			<button> div2-span1 </button>
			<button> div2-span2 </button>
			<button> div2-span3 </button>
		</div>
	</body>
	<template id="scanInput">
		<div >
			模板
		</div>
	</template>

注意：

test1 是 document.createElement(“button”)是创建的新元素，每次执行都创建新元素。
test2，test3仅仅是移动已存在的元素。

		var count = 0;
		function test1() {
			// 在div1中直接添加子元素
			var node = document.createElement("button");
			node.innerText = "新键元素： "+count++;
			div.appendChild(node);
		}
		function test2() {
			// 将div1中的第二个子元素移动到最后
			div.appendChild(div.children[1]);
		}
		
		function test3() {
			// 移动元素到其他的父级元素。将div1中的子元素--移动为-->div2中的子元素
			// 如果将div1中的所有元素都移动动div2后，在执行此函数就会报错了
			div2.appendChild(div.children[0]);
		}