如何在使用jquery添加元素后应用CSS

Question

我试图将动态元素添加到HTML页面并应用bootstrap 3.2 css＆＃39。

以下是jquery功能：

$( document ).ready(function() {
    $(".refresh-btn").click(function (){

        $("<div></div>").attr("class","row new").appendTo('.Item-List');
        $("<div></div>").attr("class","col-sm-3").appendTo('.Item-List .new');
        $("<div></div>").attr("class","panel panel-default").appendTo('.Item-List .new .col-sm-3');
        $("<div></div>").attr("class","panel-headingt").appendTo('.Item-List .row .col-sm-3 .panel-default');
        $("<h3></h3>").attr("class","panel-title").text("Panel title").appendTo('.Item-List .new .col-sm-3 .panel-default .panel-headingt');
        $("<div></div>").attr("class","panel-body").text("Panel content").appendTo('.Item-List .new .col-sm-3 .panel-default');
        $("<button></button>").attr("type","button").attr("class","btn btn-default btn-sm").attr("id","proccesing-btn").appendTo('.Item-List .new .col-sm-3 .panel-default');       
    })
});

此函数的含义是复制以下代码并动态添加：

           <div class="row">
                <div class="col-sm-3">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Panel title</h3>
                        </div>
                        <div class="panel-body">Panel content</div>
                        <button type="button" class="btn btn-default btn-sm"
                            id="proccesing-btn">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </button>
                    </div>
                </div>                  
            </div> 

以下是我得到的结果，除了css不适用于我添加的新元素之外，一切似乎都很好：

Answer 1

这行中有拼写错误：

$("<h3></h3>").attr("class","panel-title").text("Panel title").appendTo('.Item-List .new .col-sm-3 .panel-default .panel-headingt');

将.panel-headingt更改为.panel-heading