如何在html容器中添加元素作为列堆栈？

Question

我想要这样的默认html结构：

我需要添加dyanimcally添加rectangebox，它必须像这样

我怎么能这样做？

我所做的是这样的：

<div style="width:400px;">
        <ul id="UlPopUp" style="-webkit-columns: 2; -moz-columns: 2; columns: 2;">
            <li id='liLeftDescriptions'>
                <span>Item1
                </span>
            </li>
            <li id='liLeftSkills'>
                <span>Item1</span>
            </li>
            <li id='liLeftClient'>
                <span>Item1</span>
            </li>
        </ul>
    </div>

http://jsfiddle.net/6eq56/

Answer 1

我想你可能会使用类似的东西：

var div_to_append = "<li class='some_class'><span>Item1</span></li>"
$("#clickBtn").on("click", function() {
$("#UlPopUp").append(div_to_append);
});

我使用button检查了jfiddle http://jsfiddle.net/6eq56/2/

我认为您要发起事件on click或类似的事件

Answer 2

$('button').click(function(){
    var elem = $("<div class='item'></div>");
    if($('.col1>div').length < 4)
        $('.col1').append(elem);
    else
        $('.col2').append(elem);
});