javascript - 如何让新追加的html代码保持原有的css样式？

Question

我使用 bootstrap fpr 设计了一个网页。我希望能够在 html 模板中插入一段 html 代码。但是，插入后，虽然我指定了select所属的类(selectpicker，这是bootstrap中的一个类)。新添加的select field 没有selectpicker 类的css 样式。如何在不重新加载网页的情况下让select字段保持css样式？

// Add a new experiment
$('button[name=addExperiment]').click(function(){
    var existingExperiments = document.getElementsByClassName('experiment');
    var newIndexStr = (existingExperiments.length+1).toString();
    $('div[name=formBody]').append('<div class="col-lg-6 col-md-6 col-sm-6 mb experiment">'+
                                       '<h4>Question'+newIndexStr+':</h4>'+
                                       '<label> Name*: </label>'+
                                       '<input type="text" name="experimentName" pattern="'+PATTERN_FOR_NAME+'" title="'+PATTERN_FOR_NAME_HINT+'" required>'+
                                       '<br>'+
                                       '<label>Description:</label>'+
                                       '<br>'+
                                       '<textarea class="longInput" cols="30" rows="5" name="experimentDescription" pattern="'+PATTERN_FOR_EXPERIMENT_DESCRIPTION+'" title="'+PATTERN_FOR_EXPERIMENT_DESCRIPTION_HINT+'"></textarea>'+
                                       '<div class="valueType">'+
                                       '<label>Value Type*: </label>'+
                                       '<select class="selectpicker" data-style="btn-inverse" data-width="auto" name="valueType" title="Choose A Value Type" required>'+
                                       '<option value="Text" selected="selected">Text</option>'+
                                       '<option value="Number">Number</option>'+
                                       '</select>'+
                                       '<div class="valueRange" style="display: none;">'+
                                       '<label>Value Range: </label>'+
                                       '<input type="text" name="valueRange" pattern="'+PATTERN_FOR_VALUE_RANGE+'" title="'+PATTERN_FOR_VALUE_RANGE_HINT+'">'+
                                       '</div>'+
                                       '<div class="valueCandidates" style="display: block;">'+
                                       '<label>Value Candidates: </label>'+
                                       '<input type="text" name="valueCandidates" pattern="'+PATTERN_FOR_VALUE_CANDIDATES+'" title="'+PATTERN_FOR_VALUE_CANDIDATES_HINT+'">'+
                                       '</div>'+
                                       '</div>'+
                                       '<label>Order Number: </label>'+
                                       '<input type="number" name="experimentOrder"  value='+newIndexStr+' min="1" step="1" required>'+
                                   '</div>');
});

Answer 1

感谢 adeneo 和 Viters 的帮助。我的问题的原因是在我附加 html 代码后，selectpicker(由 bootstrap-select 呈现)没有重新加载。在我的代码末尾添加这一行后，问题就解决了。 here是相关文档的链接。

$('.selectpicker').selectpicker('render');