在页面顶部以外的其他位置添加bootstrap4导航栏

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/js/bootstrap.min.js"></script>

<div id="custom-navbar"></div>

<script>
    // 获取导航栏的容器
    var navbarContainer = document.getElementById("custom-navbar");

    // 创建导航栏元素
    var navbar = document.createElement("nav");
    navbar.classList.add("navbar", "navbar-expand-lg", "navbar-light", "bg-light");

    // 创建导航栏内容
    var navbarContent = document.createElement("div");
    navbarContent.classList.add("collapse", "navbar-collapse");
    navbarContent.id = "navbarContent";

    // 创建导航栏列表
    var navbarList = document.createElement("ul");
    navbarList.classList.add("navbar-nav", "mr-auto");

    // 创建导航栏项
    var navItem1 = document.createElement("li");
    navItem1.classList.add("nav-item");
    var navLink1 = document.createElement("a");
    navLink1.classList.add("nav-link");
    navLink1.href = "#";
    navLink1.textContent = "导航项1";
    navItem1.appendChild(navLink1);

    var navItem2 = document.createElement("li");
    navItem2.classList.add("nav-item");
    var navLink2 = document.createElement("a");
    navLink2.classList.add("nav-link");
    navLink2.href = "#";
    navLink2.textContent = "导航项2";
    navItem2.appendChild(navLink2);

    // 将导航栏项添加到导航栏列表中
    navbarList.appendChild(navItem1);
    navbarList.appendChild(navItem2);

    // 将导航栏列表添加到导航栏内容中
    navbarContent.appendChild(navbarList);

    // 将导航栏内容添加到导航栏中
    navbar.appendChild(navbarContent);

    // 将导航栏添加到导航栏容器中
    navbarContainer.appendChild(navbar);
</script>

<style>
    /* 自定义导航栏样式 */
    #custom-navbar {
        /* 添加样式以适应你的需求 */
    }
</style>