@DeniSidorenko

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

Добрый день, требовалось создать такую структуру
<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 = '';


		}
		
	})
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
const li = document.createElement('li');

li.innerHTML = `
  <div class="view">
    <input class="toggle" type="checkbox">
    <label>${e.target.value}</label>
    <button class="destroy"></button>
  </div>
  <input class="edit" value="">`;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Tim-A-2020
@Tim-A-2020
Помог? Отметь решением
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 = '';
    }

})
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы