从javascript创建Bootstrap下拉按钮

在 JavaScript 中创建 Bootstrap 下拉按钮涉及到动态生成 HTML 元素并将其插入到 DOM 中。Bootstrap 提供了丰富的 CSS 类和 JavaScript 插件来实现下拉按钮的功能。以下是一个示例，展示如何使用 JavaScript 动态创建一个 Bootstrap 下拉按钮。

步骤

引入 Bootstrap CSS 和 JavaScript：确保在 HTML 文件中引入了 Bootstrap 的 CSS 和 JavaScript 文件。您可以使用 CDN 进行引入。
使用 JavaScript 创建下拉按钮：使用 JavaScript 动态生成下拉按钮的 HTML 结构，并将其插入到 DOM 中。

示例代码

HTML 文件

首先，创建一个基本的 HTML 文件，并引入 Bootstrap 的 CSS 和 JavaScript 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Dropdown Button</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <div id="dropdown-container"></div>
    </div>

    <!-- 引入 jQuery 和 Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript 文件（script.js）

接下来，编写 JavaScript 代码来动态创建下拉按钮。

document.addEventListener('DOMContentLoaded', function() {
    // 创建下拉按钮的容器
    var dropdownContainer = document.getElementById('dropdown-container');

    // 创建下拉按钮
    var dropdownButton = document.createElement('button');
    dropdownButton.className = 'btn btn-primary dropdown-toggle';
    dropdownButton.type = 'button';
    dropdownButton.id = 'dropdownMenuButton';
    dropdownButton.setAttribute('data-toggle', 'dropdown');
    dropdownButton.setAttribute('aria-haspopup', 'true');
    dropdownButton.setAttribute('aria-expanded', 'false');
    dropdownButton.innerText = 'Dropdown button';

    // 创建下拉菜单
    var dropdownMenu = document.createElement('div');
    dropdownMenu.className = 'dropdown-menu';
    dropdownMenu.setAttribute('aria-labelledby', 'dropdownMenuButton');

    // 创建下拉菜单项
    var menuItem1 = document.createElement('a');
    menuItem1.className = 'dropdown-item';
    menuItem1.href = '#';
    menuItem1.innerText = 'Action';

    var menuItem2 = document.createElement('a');
    menuItem2.className = 'dropdown-item';
    menuItem2.href = '#';
    menuItem2.innerText = 'Another action';

    var menuItem3 = document.createElement('a');
    menuItem3.className = 'dropdown-item';
    menuItem3.href = '#';
    menuItem3.innerText = 'Something else here';

    // 将菜单项添加到下拉菜单
    dropdownMenu.appendChild(menuItem1);
    dropdownMenu.appendChild(menuItem2);
    dropdownMenu.appendChild(menuItem3);

    // 创建下拉按钮的父容器
    var dropdownDiv = document.createElement('div');
    dropdownDiv.className = 'dropdown';

    // 将下拉按钮和下拉菜单添加到父容器
    dropdownDiv.appendChild(dropdownButton);
    dropdownDiv.appendChild(dropdownMenu);

    // 将父容器添加到页面
    dropdownContainer.appendChild(dropdownDiv);
});

解释

HTML 文件：引入了 Bootstrap 的 CSS 和 JavaScript 文件，并创建了一个容器 dropdown-container，用于放置动态生成的下拉按钮。
JavaScript 文件：
- 使用 document.createElement 方法创建下拉按钮和下拉菜单的各个部分。
- 设置必要的属性和类名，以便符合 Bootstrap 的样式和功能要求。
- 将下拉按钮和下拉菜单项添加到下拉菜单容器中。
- 最后，将整个下拉按钮组件插入到 dropdown-container 中。