jQuery: Создать div и вывести информацию в него

235

26 февраля 2022, 12:20

Суть такая. Я жму на кнопку, и происходят следующие действия:

Создается div
Ему присваивается класс со стилями из css
В него перекидываются данные из input/textarea

Все это через jQuery.

Я сделал вот так, но оно не работает

$('#button').click(function() {
    var infoTitle = $('#name').val();
    var infoObject = $('#text').val();
    $('<div>').addClass('point-new');
    $('<div>').addClass('title-new').html(infoTitle);
    $('<div>').addClass('object-new').html(infoObject);
});

point-new - родительский, обертка для двух последующих
name - input
text - textarea

p.s. Только разбираюсь в js и jquery, могу не видеть очевидных вещей

Answer 1

Ваша ошибка в том, что создавая новые элементы вы не добавляете их на страницу

jQuery(function($) { 
  $('#button').click(function() { 
 
    var infoTitle = $('#name').val(); 
    var infoObject = $('#text').val(); 
 
    var parent = $('<div>')   // создали новый элемент 
      .addClass('point-new')  // установили ему класс 
      .appendTo('body');      // добавили дочерним в элемент body 
 
    $('<div>')                // создали новый элемент 
      .addClass('title-new')  // установили ему класс 
      .html(infoTitle)        // добавили контент 
      .appendTo(parent);      // добавили дочерним в parent 
 
    $('<div>').addClass('object-new').html(infoObject).appendTo(parent); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<input id="name" type="text"/><br> 
<textarea id="text"></textarea><br> 
<input id="button" type="button" value="Add"/>