title: Changing <ul> background color on button click
body: <p>On a button click I am creating a draggable div with the help of jquery ui. Each div created has text appended from a textarea input field. The text is placed in bulleted list tags. I am running into this problem: I want to set the background color dynamically for everything inside the <code>&lt;ul&gt;</code> tag. I am using <a href="http://bgrins.github.io/spectrum/" rel="nofollow">SPECTRUM</a> as the color picker. On the button click instead of changing the <code>&lt;ul&gt;</code> tag background it changes the whole div. How can I only change the <code>&lt;ul&gt;</code> background and not the div? <a href="http://jsfiddle.net/bullseye2346/0wbnud4k/50/" rel="nofollow">JSFIDDLE</a></p>
  
  <pre><code>$('#button').click(function (e) {
      $('&lt;div /&gt;', {
          class: 'draggable ui-widget-content',
          text: $('textarea').val(),
          html:  '&lt;ul&gt;'+
                  '&lt;li&gt;'+
                  '&lt;a href="#"&gt;'+
                  '&lt;/a&gt;'+
                  '&lt;/li&gt;'+$('textarea').val()+'&lt;/li&gt;'+
                  '&lt;/ul&gt;',
          appendTo: '.middle-side',
          draggable: {
              containment: 'parent'
          }
      })
      .css('background-color' , color)
      .addClass('placement');
  });
  </code></pre>