Set ID on currently appended element
<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>
