Как сократить данный код js?

Question

[DeniSidorenko]

Добрый день, требовалось создать такую структуру

<li>
						<div class="view">
							<input class="toggle" type="checkbox">
							<label>Taste JavaScript</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li>

Сделал таким образом, но мне кажется код можно сократить и сделать более универсальным

input.addEventListener('keyup', function (e) {
		
		var string = input.value;

		if(e.key == 'Enter'){
			


			var liClass = document.createElement('li');
			var divClass = document.createElement('div');
			var editInput = document.createElement('input')
			var toggleInput = document.createElement('input')
			var labelInput = document.createElement('label')
			var button =  document.createElement('button')

			divClass.className = 'view';
			editInput.className = 'edit';
			editInput.value = 'Rule the web';
			toggleInput.className = 'toggle';
			toggleInput.type = 'checkbox';
			labelInput.textContent = string;
			button.className = 'destroy';


			liClass.appendChild(divClass);
			liClass.appendChild(editInput)
			divClass.appendChild(toggleInput)
			divClass.appendChild(labelInput)
			divClass.appendChild(button)
			todoList.appendChild(liClass);


			input.value = '';


		}
		
	})

Comments

[Одиночка Айс]

Что мешает засунуть шаблон целиком вместо того чтобы городить невесть что?

Answer 1

[Tim]

input.addEventListener('keyup', ({target, key}) => {

    var string = target.value;

    if (key == 'Enter') {
        let html = `
    	<li>
            <input type="text" class="edit" value="Rule the web">
      	    <div class="view">
                   <label>${string}</label>
        	   <input type="checkbox" class="toggle">
                   <button class="destroy"></button>
            </div>
      </li>
    `;
        todoList.insertAdjacentHTML('beforeend', html);
        target.value = '';
    }

})