title: How to add span inside a span using JQuery
body: <p>I have an array of Strings(say names) in javascript. I want to add the values from this array to my dropdown list.
  The dropdown list code is like :</p>
  
  <pre><code>&lt;span id="ddcl-pFilterSelect" class="ui-dropdownchecklist ui-dropdownchecklist-selector-wrapper ui-widget" style="display: inline-block; cursor: default; overflow: hidden;"&gt;
    &lt;span class="dropdownChecklistAllBack" style="display: inline-block; overflow: hidden; white-space: nowrap;" tabindex="0"&gt;
      &lt;span class="ui-dropdownchecklist-text" style="display: inline-block; white-space: nowrap; overflow: hidden;" title="default"&gt;default
      &lt;/span&gt;
    &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>Currently this dropdown list only displays a single value : default.
  I want to display values from the string names in this dropdown menu.
  Please suggest how can I do it using JQuery. I tried many ways but to no avail.</p>