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

prepend()

Description

Inserts an element before the first childNode for each of the elements within the collection. The inserted element is automatically cloned so that all the elements within the collection will each have the inserted element as a part of their childNodes.

Syntax

collection.prepend(...elements);

Parameters

...elements - accepts an unlimited number of elements and will be appended according to the order within the function call parameters.

Return Value

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

Example

<!DOCTYPE html>
<html>
<head>
	<title>domExt Examples</title>
</head>
<body>
	<div id="app">
		<div class="menus">
			<ul id='menuList'>
				<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>
		</div>
	</div>
	<script type="text/javascript" src="domExt.js"></script>
	<script type="text/javascript">
		window.$ = document;

		let collection = $.qsa('.menuLink');
		let newElement1 = $.ce('div').html('New Element1');
		let newElement2 = $.ce('div').html('New Element2');
		let newElement3 = $.ce('div').html('New Element3');

		collection.prepend(newElement1, newElement2, newElement3)
		console.log(collection);
		/* Result
			<li>
				<a class='menuLink'>
					<div>New Element3</div>
					<div>New Element2</div>
					<div>New Element1</div>
					Menu 1
				</a>
			</li>
			<li>
				<a class='menuLink'>
					<div>New Element3</div>
					<div>New Element2</div>
					<div>New Element1</div>
					Menu 2
				</a>
			</li>
			<li>
				<a class='menuLink'>
					<div>New Element3</div>
					<div>New Element2</div>
					<div>New Element1</div>
					Menu 3
				</a>
			</li>
		*/
	</script>
</body>
</html>