Wrap Li with Ul

Question

I have the following HTML built using Jquery. I now want to wrap the li inside a UL.

<div class="panel panel-primary" style="height:200px;overflow-y:scroll;width:100%;">
<div class="panel-body">
    <div id="CommonResults">
        <ul id="Common_container">
            <li class="commmonItems" id="CommonColumns">
            <input name="ColumnAlarm_group" disabled="" type="checkbox" checked="" value=" CommonAlarms "> CommonAlarms 
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACD">Acknowledged</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACT">ActorID/OperatorID</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACV">Active</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ARD">Acknowledge Required</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="COND">Condition</li>
                <li class="columnItem"><input name="Column_Group" type="checkbox" value="ENB">Enabled</li>
            </li>
        </ul>
    </div>
</div>

This should look like this after completion.

<div class="panel panel-primary" style="height:200px;overflow-y:scroll;width:100%;">
    <div class="panel-body">
        <div id="CommonResults">
            <ul id="Common_container">
                <li class="commmonItems" id="CommonColumns">
                <input name="ColumnAlarm_group" disabled="" type="checkbox" checked="" value=" CommonAlarms "> CommonAlarms 
                    <ul><!-- After change -->
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACD">Acknowledged</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACT">ActorID/OperatorID</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ACV">Active</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ARD">Acknowledge Required</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="COND">Condition</li>
                        <li class="columnItem"><input name="Column_Group" type="checkbox" value="ENB">Enabled</li>
                    <ul><!-- After Change -->
                </li>
            </ul>
        </div>
    </div>
</div>

Any help or direction in getting the desired out come.Needs to be done using JavaScript/JQuery as I can't hard code this. Thanks

Answer 1

If you want to take all the li s except the first one, you can use this:

var els = [];
$("#CommonResults ul li:gt(1)").each(function(){
  els.push($(this));
  $(this).remove();
});
var ul = $("<ul></ul>");
for(var i = 0; i < els.length; i++){
  ul.append(els[i]);
}
$("#Common_container").append(ul);

https://jsfiddle.net/330juLmn/