add li in ul using main div ID

Question

<div id="my_chzn" class="chzn-container chzn-container-multi chzn-container-active" style="width: 200px;" title="">

      <div style="left: 0px; width: 198px; top: 22px;" class="chzn-drop">
             <ul class="chzn-results">
                <li style="" class="active-result" id="geoRange_chzn_o_0">ABC</li>
                <li style="" class="active-result" id="geoRange_chzn_o_1">DEF</li>
                <li style="" class="active-result" id="geoRange_chzn_o_2">GHI</li>
                <li style="" class="active-result" id="geoRange_chzn_o_3">JKL</li>
                <li style="" class="active-result" id="geoRange_chzn_o_4">MNO</li>
                <li style="" class="active-result" id="geoRange_chzn_o_5">PQR</li>
             </ul>
      </div>
</div>

---

<div id="geoRange_chzn" class="chzn-container chzn-container-multi chzn-container-active" style="width: 200px;" title="">

      <div style="left: 0px; width: 198px; top: 22px;" class="chzn-drop">
             <ul class="chzn-results">
                <li style="" class="active-result" id="geoRange_chzn_o_0">ABC</li>
                <li style="" class="active-result" id="geoRange_chzn_o_1">DEF</li>
                <li style="" class="active-result" id="geoRange_chzn_o_2">GHI</li>
                <li style="" class="active-result" id="geoRange_chzn_o_3">JKL</li>
                <li style="" class="active-result" id="geoRange_chzn_o_4">MNO</li>
                <li style="" class="active-result" id="geoRange_chzn_o_5">PQR</li>
             </ul>
      </div>
</div>

---

The first main div id=my_chzn and the second main div id=geoRange_chzn and other things are same; How can I add li based upon the main div ID, in the above scenario?

Answer 1

You can do

$('#my_chzn .chzn-drop ul').append('<li class="active-result" id="geoRange_chzn_o_6">STU</li>');

to add a li in the ul inside the div of class chzn-drop inside the div with id my_chzn .

To add the li to the other div, change the id like this :

$('#geoRange_chzn .chzn-drop ul').append('<li/>');

Answer 2

var s = "geoRange_chzn" // here is the id only
$("#"+s+" *").each( function(e) {
    var s = $(this).prop("tagName");
    if(s=="UL") {
        $(this).append('<li style="" class="active-result" id="geoRange_chzn_o_5">PQR</li>');
    }
});

​ if you have only id then you can use above technique to append to UL element.

Working Fiddle