All attributes of a tag which is not yet in the DOM
<p>I have a JavaScript function that merges an html snipped that is NOT YET in the DOM , for example</p>

<pre><code>&lt;div class="one two"&gt;&lt;input /&gt;&lt;span name="abc"&gt;Text&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>with a DOM node/tag</p>

<pre><code>&lt;div id="aaa" class="another"&gt;&lt;/div&gt;
</code></pre>

<p>The result is: </p>

<pre><code>&lt;div id="aaa" class="one two another"&gt;&lt;input /&gt;&lt;span name="abc"&gt;Text&lt;/span&gt;&lt;/div&gt;
</code></pre>

<p>I want to improve this function. </p>

<p>Until now I it does the following: </p>

<ul>
<li><p>It takes the class attribute of the first source tag and merges it with the target:</p>

<pre><code>classes = $(source).first().attr("class");
this.addClass(classes);
</code></pre></li>
<li><p>It appends the source child tags to the target:</p>

<pre><code>this.append($(source).first().children());
</code></pre></li>
</ul>

<p>Now I want to add to this function:</p>

<pre><code>   Take all attribute (not "class") of the first source tag and add it to the
   first target tag (overwrite if it exists).
</code></pre>

<p>The problem is, that I cannot take "attributes", because the source snipped is not yet in the DOM. The solution that I have until now is not very beautiful: For every very common attribute I have an extra line: </p>

<pre><code>tabindex = $(source).first().attr("tabIndex");
this.attr("tabIndex", tabindex);

wrap = $(source).first().attr("wrap");
this.attr("wrap", wrap);
</code></pre>

<p>Has anybody an idea how to get all attributes of such an html snippet (first tag)?</p>

<p><strong>Update:</strong></p>

<p>Of course I could swap source and target:</p>

<ul>
<li>Read all attributes of the target DOM tag with "attributes".</li>
<li>Add these attributes to the first tag of the snippet, which is not yet in the DOM.</li>
<li>Replace the the DOM tag with the html snippet.</li>
</ul>

<p>But is there a more elegant solution?</p>
