title: Set ID on currently appended element
body: <p>I have a <code>&lt;script type="text/template&gt;</code> which inner HTML I use to create new elements.
  How can I additionally add an ID to those created elements?</p>
  
  <pre><code>&lt;script type="text/template" id="element-template"&gt;
      &lt;div class="element-container"&gt;
          &lt;p&gt;Template&lt;/p&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Desired outcome:</p>
  
  <pre><code>&lt;div id="my-element" class="element-container"&gt;
     &lt;p&gt;Template&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Following code works, but I don't want to use <code>find('.element-container')</code> on the parent because the class could change in the future:</p>
  
  <pre><code>var template = $('#element-template').html();
  $('#output').append(template).parent().find('.element-container').attr('id', 'my-element');​
  </code></pre>
  
  <p>Use can find a JSFiddle here: <a href="http://jsfiddle.net/RZrkB/1/" rel="nofollow">http://jsfiddle.net/RZrkB/1/</a></p>