HTMLCollection and Nodelist appendTo() - KirkGarcia182/domExtend GitHub Wiki

appendTo()

Description

Inserts each of the elements within the collection after the last childNode of the parentNode.

Syntax

collection.appendTo(node, clone);

Parameters

node - A Node where the elements within the collection will be inserted to

clone (Optional) - A Boolean that will determine whether the inserted elements shall be cloned in order to preserve the elements current position.

Note: The default value is false meaning it will not clone the elements within the collection and thus will transfer all the elements within the collection to the new element, which means that the collection's number of elements will now be doubled.

Return Value

The collection you just manipulated so you can chain these methods.

Note: when the clone parameter is set to true the number of elements within the collection will be doubled so be careful while method chaining.

Example

<!DOCTYPE html>
<html>
<head>
	<title>domExt Examples</title>
</head>
<body>
	<div id="app">
		<div class="menus">
			<ul id='menuList1'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
			<ul id="menuList2"></ul>
			<ul id="menuList3"></ul>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let collection = $.qsa('.menuLink');
		let menuList1 = $.byId('menuList1');
		let menuList2 = $.byId('menuList2');
		let menuList3 = $.byId('menuList3');

		collection.appendTo(menuList2);
		console.log(menuList1);
		/* Result
			<ul id='menuList1'></ul>
		*/

		console.log(menuList2);
		/* Result
			<ul id='menuList2'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
		*/

		collection.appendTo(menuList3, true);
		console.log(menuList2);
		/* Result
			<ul id='menuList2'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
		*/

		console.log(menuList3);
		/* Result
			<ul id='menuList3'>
				<li><a class='menuLink'>Menu 1</a></li>
				<li><a class='menuLink'>Menu 2</a></li>
				<li><a class='menuLink'>Menu 3</a></li>
			</ul>
		*/
	</script>
</body>
</html>