Вывод текста из input каждый раз на новую строку без удаления предыдущей

Question

Всем привет. Помогите, пожалуйста, подправить код. Сейчас после нажатия на кнопку каждое слово из input выводится в отдельный li, при этом после повторного нажатия текст из li удаляется. Необходимо при нажатии на кнопку весь текст из input переносить на один li, при повторном нажатии не удалять предыдущую информацию и новый текст переносить на следующий li и т.д.

Спасибо!

document.querySelector("button").onclick = myClick;

function myClick() {
  let a = document.querySelector(".myInput").value;
  document.querySelector(".textOutput").innerHTML = prepare(a);
  document.querySelector(".myInput").value = '';
}

function prepare(text) {
  return text
    .split(' ')
    .map(word => {
      if (word.length === 0) {
        return word;
      }
      let color = '';
      if (word.length > 3) {
        color = 'green';
      }
      if (word.match(/[!@#$&*%]/)) {
        color = 'red';
      }
      return `<ul style="color: ${color}">${word}</ul>`;
    }).join(' ');
}

<div class="inputblock">
  <input type="text" class="myInput" placeholder="Enter the text">
  <button class="clickButton">Click</button>
</div>
<ul class="textOutput">
  <li></li>
</ul>

Answer 1

Казалось бы, .innerHTML = prepare(a) заменить на .innerHTML += prepare(a) и ура, работает. Но использованный здесь += заново перезапишет весь HTML вместе с добавленным куском. На простых примерах это не так заметно, а на каком-нибудь document.body.innerHTML += будет грубой ошибкой.

Вместо него, можно использовать .insertAdjacentHTML("beforeEnd", prepare(a)) ( MDN ) который вставит только полученный кусок от prepare(a)

first("button").addEventListener("click", function() {
  let val = first(".myInput").value.trim();
  if (!val) return; // ничего не ввели? Прервать.

  first(".textOutput").insertAdjacentHTML("beforeEnd", prepare(val));
  first(".myInput").value = '';
});

function prepare(text) {
  return "<li>" + text.split(/\s+/).map(wrap_span).join(" ") + "</li>";
  // в регулярном выражении, \s+ =один или много пробелов подряд
  
  /***/
  function wrap_span(word) {    
    let color = /[!@#$&*%]/.test(word) ? "red" : word.length > 3 ? "green" : "";

    return `<span style="color: ${ color }">${ word }</span>`;
  }
}

function first(str) {
  return document.querySelector(str);
}

<div class="inputblock">
  <input type="text" class="myInput" placeholder="Enter the text">
  <button class="clickButton"> Click </button>
</div>
<ul class="textOutput"></ul>

БЛОГ НА HUSL

Вывод текста из input каждый раз на новую строку без удаления предыдущей

Ответы (1 шт):