与给定的css集成的难度

Question

我已经提供了一个CSS，我正在努力将我的代码整合到css中。

这是css

<div data-role="collapsible">
    <h3>Popcorn</h3>
    <div class="prd-items-detials">
        <ul>
            <li class="head">
                <form>
                    <input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true">
                    <label for="checkbox-mini-0">Small Pack 150g</label>
                </form>
            </li>
            <li class="prd-items-qt">
                <div class="col">
                    <i class="minus"></i>
                    <i class="qt">12</i>
                    <i class="plus"></i>
                </div>
                <div class="col">

                </div>
                <div class="col">
                    Rs: 150/-
                </div>
            </li>
        </ul>

    </div>
</div>

这是它看起来的形象。

我尝试使用

实现相同目标

activateUiHTML.append('<div data-role="collapsible">');
activateUiHTML.append('<div>Popcorn</div>');
activateUiHTML.append('<div class="prd-items-detials">');
activateUiHTML.append('<ul>');
activateUiHTML.append('<li class="head">');
activateUiHTML.append('<form>');
activateUiHTML.append('<input type="checkbox" name="Popcorn" id="Popcorn" data-mini="true">');
activateUiHTML.append('<label for="checkbox-mini-0">Popcorn</label>');
activateUiHTML.append('</form>');
activateUiHTML.append('</li>');
activateUiHTML.append('<li class="prd-items-qt">');
activateUiHTML.append('<div class="col">');
activateUiHTML.append('<i class="minus"></i>');
activateUiHTML.append('<i class="qt">12</i>');
activateUiHTML.append('<i class="plus"></i>');
activateUiHTML.append('</div>');
activateUiHTML.append('<div class="col">150</div>');
activateUiHTML.append('</li>');
activateUiHTML.append('</ul>');
activateUiHTML.append('</div>');
activateUiHTML.append('</div>');
activateUiHTML.append(activateUiHTML) ;

但它似乎是这样

有人可以让我知道如何动态构建吗？

Answer 1

当您追加单<div>次浏览器时会自动关闭，以便它会破坏您的HTML。

如果您真的想这样做，可以像这样创建：

activateUiHTML.append('<div data-role="collapsible"><h3>Popcorn</h3><div class="prd-items-detials"><ul><li class="head"><form><input type="checkbox" name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true"><label for="checkbox-mini-0">Small Pack 150g</label></form></li><li class="prd-items-qt"><div class="col"><i class="minus"></i><i class="qt">12</i><i class="plus"></i></div><div class="col"></div><div class="col">Rs: 150/-</div></li></ul></div></div>');

您应该考虑使用模板（例如fiddle）