title: programmatically setting Bootstrap radio button text
body: <p>I am trying to set up a set of radio buttons using Bootstrap in javascript</p>
  
  <p>The code I am trying is:</p>
  
  <pre><code>        var viewedFilterButtons = $("&lt;div&gt;").addClass("btn-group").attr("data-toggle", "buttons");
          viewedFilterButtons.append($("&lt;label&gt;").addClass("btn").addClass("btn-primary").append($("&lt;input&gt;").attr("id", "viewed-important").attr("type","radio").attr("name","viewed-filter").attr("value","important").attr("autocomplete","off").append($("&lt;label for=\"viewed-important\"&gt;").text("Important"))));
          viewedFilterButtons.append($("&lt;label&gt;").addClass("btn").addClass("btn-primary").append($("&lt;input&gt;").attr("id", "viewed").attr("type","radio").attr("name","viewed-filter").attr("value","viewed").attr("autocomplete","off").text("Reviewed")));
  </code></pre>
  
  <p>(note that I'm trying 2 different things to get the text into the button -- in the first <code>input</code> I'm embedding a <code>label</code> and in the second I'm just trying to set the <code>text</code> of the <code>input</code>.  Neither is working right now.)</p>
  
  <p>This generates the following HTML:</p>
  
  <pre><code>&lt;div class="btn-group" data-toggle="buttons"&gt;
    &lt;label class="btn btn-primary active"&gt;
      &lt;input id="viewed-important" name="viewed-filter" value="important" autocomplete="off" type="radio"&gt;
        &lt;label for="viewed-important"&gt;Important&lt;/label&gt;
      &lt;/input&gt;
    &lt;/label&gt;
    &lt;label class="btn btn-primary"&gt;
      &lt;input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio"&gt;Reviewed
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Note that the input doesn't seem to be closed in the second case.  I'm getting this HTML from the Web Console Inspector in Firefox. </p>
  
  <p>What I'm getting is a set of tiny radio buttons with no text.  The toggle behavior works fine.</p>
  
  <p>What am I missing here?  When I manually generate a set of labels for radio buttons like this directly in the HTML it works fine.</p>
  
  <pre><code>  &lt;label class="btn btn-primary"&gt;
      &lt;input id="viewed" name="viewed-filter" value="viewed" autocomplete="off" type="radio"&gt;Reviewed&lt;/input&gt;
    &lt;/label&gt;
  </code></pre>