Как добавить кнопку в меню?

Question

[MRcracker]

Есть небольшое меню:

<ul class="tree" id="tree">
		<li>Животные
			<ul>
				<li>Млекопетающие
					<ul>
						<li>Коровы</li>
						<li>Ослы</li>
						<li>Собаки</li>
						<li>Тигры</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

for (let li of tree.querySelectorAll('li')) {
			let span = document.createElement('span');
			span.classList.add('show');
			li.prepend(span);
			span.append(span.nextSibling);

			tree.onclick = e => {
				if (e.target.tagName != 'SPAN') return;

				let childrenContainer = e.target.parentNode.querySelector('ul');

				if (!childrenContainer) return;

				childrenContainer.hidden = !childrenContainer.hidden;

				if (childrenContainer.hide) {
					e.target.classList.add('hide');
					e.target.classList.remove('show');
				} else {
					e.target.classList.add('show');
					e.target.classList.remove('hide');
				}

			}
		}

Помогите, пожалуйста, разобраться как добавить спискам Млекопитающие и Животные кнопки через js и сделать по клику на них чтобы элементы скрывались.