Как добавить текст в div, кликая на button, что связан с textarea?

Question

Есть форма для заполнения и кнопка. Нужно сделать так, чтобы вводя текст в <textarea> и нажав на кнопку, появился новый <div> с текстом, который ввели.
Типа некий список дел: пишешь, добавляешь и вот данные перед глазами.

Есть html-код:

<div class="addList">
  <h2>Добавить новое дело</h2>
  <div class="box">
    <div class="nameOf">* Название</div>
    <textarea class="name"></textarea>
    <div class="about">* Описание</div>
    <textarea class="comment"></textarea>
    <button class="addButt">Добавить дело</button>
  </div>
</div>


<div class="list">
  <h2>Список дел:</h2>
  <div class="item">
    <h3>Купить лошадь</h3>
    <img class="close" src="img/gg.png">
    <div class="item-comment">По цене 300 т.р. за штуку</div>
  </div>
</div>

Answer 1

Смотри тут: https://itchief.ru/javascript/jquery-create-add-delete-elements Создание, добавление и удаление элементов в jQuery.

Answer 2

Есть такой http://todomvc.com/. Он как раз демонстрирует решение подобной задачи ста способами, с использованием различных библиотек и фреймворков. Можно выбрать на любой вкус.

Есть мнение, что для разработки приложений (а не просто фишек на сайте) лучше использовать специальные средства. jquery в этом, в лучшем случае, не помогает.

"вводя текст в и нажав на кнопку, появился новый div с текстом" -- это описание лишь видимой части того, что происходит.

Лучше думать так:

У меня есть "список дел" (это состояние, не HTML).
Кнопка добавляет дело в список (в HTML она ничего не добавляет).
"список дел" отображается в HTML в соответствии с описанным шаблоном.
выбранная библиотек обеспечивает отображение автоматически.

Answer 3

Вот такой вариант.
Думаю по комментариям разберётесь что куда и как.
В противном случае - в профиле есть мои контакты, пишите, помогу.

let tmp = $('<div class="item">\
    <h3></h3>\
    <img class="close" src="img/gg.png">\
    <div class="item-comment"></div>\
  </div>'); // Это шаблон "дела"
  
$('.addList .addButt').on('click', function(){ // При нажатии на кнопку "Добавить дело", выполняем следующее:
  let name = $('.addList .name').val(), // Записываем в переменную значение textarea.name
      comm = $('.addList .comment').val(); // и значение textarea.comment
  if(name.length > 0 && comm.length > 0) { // Если оба поля заполнены, то..
    tmp.find('h3').text(name); // берём наш шаблон "дела" и ищем в нём тег h3, после добавляем в него значение записанное в переменной name
    tmp.find('.item-comment').text(comm); // Тоже самое делаем для переменной comm, но в элемент с классом .item-comment
    $('.list').append(tmp); // Полученный шаблон добавляем в конец .list
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="addList">
  <h2>Добавить новое дело</h2>
  <div class="box">
    <div class="nameOf">* Название</div>
    <textarea class="name"></textarea>
    <div class="about">* Описание</div>
    <textarea class="comment"></textarea>
    <button class="addButt">Добавить дело</button>
  </div>
</div>


<div class="list">
  <h2>Список дел:</h2>
  <div class="item">
    <h3>Купить лошадь</h3>
    <img class="close" src="img/gg.png">
    <div class="item-comment">По цене 300 т.р. за штуку</div>
  </div>
</div>

БЛОГ НА HUSL

Как добавить текст в div, кликая на button, что связан с textarea?

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