Как добавить кнопку динамически

Question

Я получаю значение от input field до события .onclick, где я создаю новый div с дополнительной информацией. Я пытаюсь добавить 3 <button> тега рядом со входом во вновь созданной строке, но не могу понять, как правильно добавить их вместе с .addClass, чтобы я также мог их стилизовать.

Я пробовал несколько способов добавить <button> div, но не могу решить проблему. Все остальное работает нормально, но мне нужно добавить кнопки с новым классом.

$("#search-submit").on("click", function() {
  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#search").val();
  var row = $("<div>");
  row.addClass("attraction");
  row.append("<p>" + itineraryInput + "</p>");
  row.append("<button>" + "<button>" + "<button>");
  $("#first").prepend(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
  <div class="col">
    <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
    <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
  </div>
</div>

<div class="trans_container">
  <div id="trans_first"></div>
  <div id="trans_second"></div>
</div>

<div class="acontainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="clear"></div>
</div>

Answer 1

Мы создали массив для классов кнопок, а затем добавили эти классы в кнопку с помощью функции addClass. Пожалуйста, поделитесь своим мнением после попытки нашего сценария.

$("#search-submit").on("click", function() {

  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#search").val();

  console.log(itineraryInput);

  var classes = ["classA", "classB", "classC"]; // array of classes for button
  var row = $("<div>");
  row.addClass("attraction");
  row.append("<p>" + itineraryInput + "</p>");
  for (var i = 0; i < 3; i++) {
    $("<button>" + itineraryInput + "</button>").addClass(classes[i]).appendTo(row); // added class to button
  }

  // var attButton = $("<button>");
  //     attButton.addClass("attButton");
  //     attButton.append("<button>" );

  $("#first").prepend(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
  <div class="col">
    <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
    <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
  </div>
</div>

<div class="trans_container">
  <div id="trans_first"></div>
  <div id="trans_second"></div>
</div>

<div class="acontainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="clear"></div>
</div>

Answer 2

    var $button = $("button")

// Adding event listener for when user clicks the add-bttn
$button.on("click", function() {

// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = ($("#search").val() === "") ? " " : $("#search").val();

console.log(itineraryInput);

var row = $("<div>");
    row.addClass("attraction");
    row.append("<p>" + $('div.attraction').length + "</p>");
    row.append("<button>" + itineraryInput + "</button>");

//providing the last thing I tried to do to make it work.
// var attButton = $("<button>");
//     attButton.addClass("attButton");
//     attButton.append("<button>" );

    $("#first").prepend(row);
});