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

Question

我正在使用引导程序来呈现下拉menu.When，我使用了下面的代码，呈现效果很好。

<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是正确的吗？

有一个遗漏的结尾>这里：

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

另外，您可能希望这样写：

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

如果双引号在单引号内，则不必转义双引号(反之亦然)