title: jQuery manipulate DOM
body: <p>this is my default HTML-Markup from the Wordpress-Plugin:</p>
  
  <pre><code>&lt;ul class="gfield_checkbox" id="input_2_21"&gt;
  
      &lt;li class="gchoice_2_21_1"&gt;
          &lt;input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1"&gt;
          &lt;label for="choice_2_21_1" id="label_2_21_1"&gt;Option One&lt;/label&gt;
      &lt;/li&gt;
  
      &lt;li class="gchoice_2_21_2"&gt;
          &lt;input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2"&gt;
          &lt;label for="choice_2_21_2" id="label_2_21_2"&gt;Option Two&lt;/label&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>After the document is ready I want to change the HTML-Markup to this:</p>
  
  <pre><code>&lt;ul class="gfield_checkbox" id="input_2_21"&gt;
  
      &lt;li class="gchoice_2_21_1 checkbox checkbox-styled"&gt;
          &lt;label for="choice_2_21_1" id="label_2_21_1"&gt;    
              &lt;input name="input_21.1" type="checkbox" value="Option One" id="choice_2_21_1"&gt;
              &lt;span&gt;Option One&lt;/span&gt;    
          &lt;/label&gt;
      &lt;/li&gt;
  
      &lt;li class="gchoice_2_21_2 checkbox checkbox-styled"&gt;
          &lt;label for="choice_2_21_2" id="label_2_21_2"&gt;    
              &lt;input name="input_21.2" type="checkbox" value="Option Two" id="choice_2_21_2"&gt;
              &lt;span&gt;Option Two&lt;/span&gt;    
          &lt;/label&gt;
      &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thats what I actually did:</p>
  
  <p>$('.gfield_checkbox > li').addClass('checkbox checkbox-styled');</p>
  
  <p>But how do I change the other parts of the code?</p>