Как реализовать такой функционал?

Question

[DeniSidorenko]

Привет, есть ul с 20 li. Дело в том что изначально видно только 8 li. 8 li кнопка, при клике на которое открывается остальные 12. Но мне надо что бы при нажатий на кнопку она переместилась в конец. Я честно не знаю как такое сделать, подскажите кто в курсе?

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>Смотреть все категории</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>

ПОСЛЕ КЛИКА


Если такое не возможно сделать с данной структурой посоветуйте пожалуйста как сделать другую.

Answer 1

[Павел Корнилов]

<ul id="list"></ul>
<script>
	'use strict';
	var list= document.getElementById('list');
	for (var i = 1; i <= 20; i++) {
		var li= document.createElement('li');
		li.textContent= i;
		list.appendChild(li);
	}
	var allEls= document.createElement('li');
	allEls.textContent= 'Смотреть все категории';
	list.appendChild(allEls);

</script>