jquery动态生成link标签

通过点击按钮动态生成link标签引入css和移除link标签。

使用方法

在html中引入jquery

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

HTML结构

<button id='add'>点击添加link标签</button>
<button id='remove'>点击移除link标签</button>

JavaScript代码

function addLink(){
    $("head").append("<link id='add-style'>");
    const css = $("head").children(":last");
    css.attr({
        rel: "stylesheet",
        type: "text/css",
        href: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.css"
    });
}

function removeLink(){
    $("#add-style").remove();
}

// 点击添加
$(document).on('click', '#add', function () {
    addLink();
})

// 点击移除
$(document).on('click', '#remove', function () {
    removeLink();
})

点击添加按钮之后可以按快捷键打开开发者工具，找到Elements，在head标签的最后面就可以看到刚刚新增的link标签啦。之后点击移除按钮之后link标签就会被删除掉。希望这个简单的案例能够帮助到你。