jQuery前添加和后追加以及指定位置前添加与后追加_代码片段

jQuery前添加和后追加以及指定位置前添加与后追加

凨影2021-08-05 23:39:022021-8-5 664

jQuery前添加和后追加以及指定位置前添加与后追加

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>jQuery前添加和后追加以及指定位置前添加与后追加</title>
    </head>
    <body>
        <h2>jQuery前添加和后追加以及指定位置前添加与后追加</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">AAAAA</a></li>
            <li class="breadcrumb-item active"><a href="#">BBBBB</a></li>
            <li class="breadcrumb-item"><a href="#">CCCCC</a></li>
        </ol>
        内容：<input type="text" name="words" value="00000" />
        <button type="button">B前添加</button>
        <button type="button">B后追加</button>
        <button type="button">最前添加</button>
        <button type="button">最后追加</button>
    </body>
</html>
<script src="view/js/jQuery-3.1.0.js"></script>
<script type="text/javascript">
$("button").click(function(){
    var words = $("input[name = "words"]").val();  //获取输入框里面的值
    var plushtml = "<li class="breadcrumb-item">" + words +"</li>"; //追加的HTML

    switch ($(this).html()){

        case "B前添加":
            $("li.breadcrumb-item.active").before(plushtml);
            break;

        case "B后追加":
            $("li.breadcrumb-item.active").after(plushtml);
            break;

        case "最前添加":
            $("ol.breadcrumb").prepend(plushtml);
            //$(plushtml).prependTo("ol");
            break;

        case "最后追加":
            $("ol.breadcrumb").append(plushtml);
            //$(plushtml).appendTo("ol.breadcrumb");
            break;
    }
});
</script>