在位置交换<li>个项目后，input.value被销毁

Question

我有一个简单的ul，列表项包含几个按钮。它们具有两个导航按钮，它们用于使列表项向前或向后移动。

问题是：每当我单击“上一个”或“下一个”按钮时，列表项中的文本就会消失。此外，每次单击后还会添加其他编辑按钮。

在替换位置后，是否有办法保留列表项中的文本？

const form = document.querySelector('form');
const ul = document.querySelector('ul');
const listItem = document.querySelector('li');
const addItemInput = document.querySelector('input.add-item-input');
const addItemButton = document.querySelector('button.add-item-button');
const removeItemButton = document.querySelector('button.remove-item-button');

function attach_span(li) {
	const span = document.createElement('span');
	span.textContent = addItemInput.value;
	li.appendChild(span);
}

function attach_br(li) {
	const br = document.createElement('br');
	li.appendChild(br);
}

function attachButton_previous(li) {
	const prev = document.createElement('button');
	prev.className = 'previous';
	prev.textContent = 'Previous';
	if(li.previousElementSibling) li.appendChild(prev);
}

function attachButton_remove(li) {
	const remove = document.createElement('button');
	remove.className = 'remove';
	remove.textContent = 'Remove';
	li.appendChild(remove);
}

function attachButton_edit(li) {
	const edit = document.createElement('button');
	edit.className = 'edit';
	edit.textContent = 'Edit';
	li.appendChild(edit);
}

function attachButton_next(li) {
	const next = document.createElement('button');
	next.className = 'next';
	next.textContent = 'Next';
	li.appendChild(next);
}

function attachListItems(li) {
	attach_span(li);
	attach_br(li);
	attachButton_previous(li);
	attachButton_remove(li);
	attachButton_edit(li);
	attachButton_next(li);
}

addItemButton.addEventListener('click', () => {
	const li = document.createElement('li');
	ul.appendChild(li);
	attachListItems(li);
	addItemInput.value = '';
});

removeItemButton.addEventListener('click', () => {
	const ul = document.getElementsByTagName('ul')[0];
	const li = document.querySelector('li:last-child');
	ul.removeChild(li);
});

ul.addEventListener('click', (e) => {
	if(e.target.tagName === 'BUTTON' ) {
		const button = e.target;
		const li = button.parentNode;
		const ul = li.parentNode;
		const prevEl = li.previousElementSibling;
		const nextEl = li.nextElementSibling;
		if(button.className === 'remove') {
			ul.removeChild(li);
		}
		if(button.className === 'previous') {
			if(prevEl) {
				ul.insertBefore(li, prevEl);
			}
		}
		if(button.className === 'next') {
			if(nextEl) {
				ul.insertBefore(nextEl, li);
			}
		}
		if(button.className === 'edit') {
			const span = li.firstElementChild;
			const input = document.createElement('input');
			input.type = 'text';
			input.value = span.textContent;
			li.insertBefore(input, span);
			li.removeChild(span);
			button.className = 'save';
			button.textContent = 'Save';
		} else {
			const input = li.firstElementChild;
			const span = document.createElement('span');
			span.textContent = input.value;
			li.insertBefore(span, input);
			li.removeChild(input);
			button.className = 'edit';
			button.textContent = 'Edit';
		}
	}
});

	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<header></header>
	<article>
		<nav id="main-nav">
			<ul>
				
			</ul>
		</nav>

		<form class="form">
			<input class="add-item-input" name="itemInput" type="text" title="Input for menu items">
			<button class="add-item-button" type="button">Add item</button>
			<button class="remove-item-button" type="button">Remove last item</button>
		</form>
</article>


	<p id="spitResult"></p>
	
	<!-- <script src="js/functions.js"></script> -->
	<script src="js/app.js"></script>