Создать кнопку выпадающего Bootstrap из JavaScript

Question

Мне нужна помощь в создании HTML-кнопки из javascript с использованием класса начальной загрузки и настройки.

Я создал кнопку начальной загрузки

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="btn btn-success" href="#" id="testbtn" onclick="javascript('ActionTxT1' , 'dropdownMenuButton', 'btn btn-success')">Action</a>
    <a class="btn btn-warning" href="#" id="testbtn" onclick="javascript('ActionTxT2' , 'dropdownMenuButton', 'btn btn-warning')">Another action</a>
    <a class="btn btn-danger" href="#" id="testbtn" onclick="javascript('ActionTxT3' , 'dropdownMenuButton', 'btn btn-danger')">Something else here</a>
  </div>
</div>

Мне нужно создать множество из них из запроса MySQL. Поэтому, используя цикл for (), я хочу создать подобные кнопки в ячейках таблицы, но сначала мне нужно выяснить, как создать кнопку.

Пока у меня есть

var btn = document.createElement("div");        
btn.className = "btn btn-secondary dropdown-toggle";
btn.nodeType = "button";
btn.id = "testDropDownButton";
// btn.data-toggle = "dropdown";

но здесь я начинаю получать ошибки, и я не уверен, что я даже иду в правильном направлении.

Answer 1

Вы можете посмотреть ниже jsfiddle- https://jsfiddle.net/ashhaq12345/xpvt214o/1025242/

    function createButton() {
      var div = document.createElement("div");

      var button = document.createElement("button");
      button.className = "btn btn-secondary dropdown-toggle";
      button.id = "dropdownMenuButton";
      button.setAttribute("data-toggle", "dropdown");
      button.setAttribute("aria-haspopup", "true");
      button.setAttribute("aria-expanded", "false");
      button.innerText="Dropdown button";

      div.append(button);
      div.className="dropdown";

      var linkDiv = document.createElement("div");
      linkDiv.className="dropdown-menu";
      linkDiv.setAttribute("aria-labelledby","dropdownMenuButton");

      var a = document.createElement("a")
      a.href="#"
      a.className="btn btn-success"
      a.id="testbtn"
      a.setAttribute("onclick", "javascript('ActionTxT1' , 'dropdownMenuButton', 'btn btn-success')")
      a.innerText="Action"

      linkDiv.append(a);
      div.append(linkDiv);

      $(".main-div").append(div);
    }

Answer 2

Вероятно, вы получаете ошибки при установке атрибута с тире в нем:

btn.data-toggle = "dropdown";

Чтобы установить атрибуты, у вас есть три варианта:

1) Используйте метод setAttribute():

btn.setAttribute('data-toggle', "dropdown");

2) Установите атрибут в свойстве dataset:.

btn.dataset['data-toggle'] = "dropdown";

3) Используйте обозначение camelCase:

btn.dataset.dataToggle = "dropdown";

Когда ваш элемент построен, добавьте его в существующий элемент, используя метод appendChild:

let div = document.getElementById('mydiv');
div.appendChild(btn);

Чтобы создать весь раскрывающийся список Bootstrap в JS, вы будете повторять этот процесс для каждого дочернего элемента.