javascript - 从 javascript 创建 Bootstrap 下拉按钮

Question

我需要帮助使用引导类和自定义从 javascript 创建 html 按钮。

我创建了一个引导按钮

<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);
    }