Adding li to ul causes all li to end up outside the ul

by Charles Wilkins IV   Last Updated May 08, 2019 13:10 PM

I have a page that has the following uls on it:

   <div id="team1" class="team_name">Desperate Housewives                        
       <ul class="sortable ui-sortable" id="sortable_1" dataid-team="1" dataid-drag="drag_team_1" data-seasonid="7">
            <li id="team1_bowler53" class="team_bowler drag_team_1 ui-sortable-handle">Celia B Flint </li>
            <li id="team1_bowler54" class="team_bowler drag_team_1 ui-sortable-handle">Gale E McDonald </li>
            <li id="team1_bowler55" class="team_bowler drag_team_1 ui-sortable-handle">Gerri  Orff </li>
       </ul>
    </div>

This loads fine on start. Note that the ids are dynamically generated.

So, now I want to add an <li> to the div:

(note that selected is the team number, so it works out to team1 as above). The insert_code, below, displays as proper html in console.log.

insert_code in console.log appears as:

<li id="team1_bowler51" class="team_bowler sub drag_team1 ui-sortable-handle">Cara M Wilkins</li>

var insert_code = '<li id="'+new_li+'" class="'+classname+' '+drag_team+' ui-sortable-handle">'+bowler_name+'</li>';
jQuery("#team"+selected).append(insert_code);

I have also tried:

jQuery("#team"+selected+" ul").append(insert_code);

Each time that I do this, I get the following HTML in Google DevTools:

<ul class="sortable ui-sortable" id="sortable_1" dataid-team="1" dataid-drag="drag_team_1" data-seasonid="7"></ul>
<li id="team1_bowler51" class="team_bowler sub drag_team1 ui-sortable-handle">Cara M Wilkins</li>
<li id="team1_bowler53" class="team_bowler drag_team_1 ui-sortable-handle">Celia B Flint </li>
<li id="team1_bowler54" class="team_bowler drag_team_1 ui-sortable-handle">Gale E McDonald </li>
<li id="team1_bowler55" class="team_bowler drag_team_1 ui-sortable-handle">Gerri  Orff </li>

Note that it has moved ALL of the li outside the ul.

From the page, it is obvious that it is not appending properly as the new li displays at the top of the ul instead of the bottom. Note that Cara Wilkins was the added li.

Any help would be appreciated...



Related Questions


Updated May 07, 2019 18:10 PM

Updated May 30, 2019 19:10 PM

Updated March 26, 2015 07:25 AM

Updated April 08, 2015 18:04 PM

Updated July 02, 2015 13:04 PM