如何在将html附加到元素时不丢失css？

Question

我使用bootstrap选择渲染下拉菜单。当我使用下面的代码时，渲染工作正常。

<div class="row">
                <div class="col-lg-3">
                    <select data-placeholder="Choose a Country" class="chosen-select chosenContainer" tabindex="2">
                        <option value=""></option>
                        <option value="United States">United States</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="Albania">Albania</option>
                        <option value="Algeria">Algeria</option>
                        <option value="American Samoa">American Samoa</option>

                    </select>
                </div>
            </div>

当我将上述代码附加到div时出现问题，所有css都丢失并显示普通的下拉菜单。

    function populate()
{
    var str="   <div class=\"row\">\n" +
"                <div class=\"col-lg-3\" " +
"                    <select data-placeholder=\"Choose a Country\" class=\"chosen-select chosenContainers\" tabindex=\"2\">\n" +
"                        <option value=\"\"></option>\n" +
"                        <option value=\"United States\">United States</option>\n" +
"                        <option value=\"United Kingdom\">United Kingdom</option>\n" +
"                        <option value=\"Afghanistan\">Afghanistan</option>\n" +
"                        <option value=\"Albania\">Albania</option>\n" +
"                        <option value=\"Algeria\">Algeria</option>\n" +
"                        <option value=\"American Samoa\">American Samoa</option>\n" +
"\n" +
"                    </select>\n" +
"                </div>\n" +
"            </div>";

var elementDiv=document.getElementById("dynamicTag");
$("#dynamicTag").append(str);


}

如何在将html附加到元素时不丢失css？

Answer 1

你确定你写的html是否正确？

缺少结算＆gt;在这里：

"                <div class=\"col-lg-3\" " +

你也可能想这样写：

'<div class="col-lg-3"> '

如果它们在单引号内，则不必转义双引号（反之亦然）