title: jQuery or native JS replacing entire element (div) including its id, classes and data
body: <p>Let's say there are several similar elements like:</p>
  <pre><code>&lt;div id=&quot;element_01&quot; class=&quot;element&quot; data-id=&quot;01&quot; data-color=&quot;blue&quot;&gt;
      Some content
  &lt;/div&gt;
  
  &lt;div id=&quot;element_02&quot; class=&quot;element&quot; data-id=&quot;02&quot; data-color=&quot;yellow&quot;&gt;
      Some content
  &lt;/div&gt;
  
  &lt;div id=&quot;element_03&quot; class=&quot;element&quot; data-id=&quot;03&quot; data-color=&quot;green&quot;&gt;
      Some content
  &lt;/div&gt;
  </code></pre>
  <p>With an AJAX call I have to get a new entire element, including all attributes of it and replace one of the elements above with it. The loaded element could look like this:</p>
  <pre><code>&lt;div id=&quot;element_02&quot; class=&quot;element active&quot; data-id=&quot;02&quot; data-color=&quot;red&quot;&gt;
      Some NEW content
  &lt;/div&gt;
  </code></pre>
  <p>As you can see, it is actually the same as element_02 in the original group, but with another content, an additional class and with a different data-color value. The desired result should look like this:</p>
  <pre><code>&lt;div id=&quot;element_01&quot; class=&quot;element&quot; data-id=&quot;01&quot; data-color=&quot;blue&quot;&gt;
      Some content
  &lt;/div&gt;
  
  &lt;div id=&quot;element_02&quot; class=&quot;element active&quot; data-id=&quot;02&quot; data-color=&quot;red&quot;&gt;
      Some NEW content
  &lt;/div&gt;
  
  &lt;div id=&quot;element_03&quot; class=&quot;element&quot; data-id=&quot;03&quot; data-color=&quot;green&quot;&gt;
      Some content
  &lt;/div&gt;
  </code></pre>
  <p>I know how to load the contents of an element into another element, which would be:</p>
  <pre><code>$('#element_02').load(url+' &gt; *');
  </code></pre>
  <p>But that loads, as mentioned, only the contents into the element and leaves the classes and the data attributes alone.</p>
  <p>Of course, I could manually just add the new class to the element and change the data value manually after the load with a function, like so:</p>
  <pre><code>$('#element_02').load(url+' &gt; *', function(){
  
     $('#element_02').addClass('active');
     $('#element_02').data('color', 'red');
  
  });
  </code></pre>
  <p>But I was wondering if there is a more universal approach which takes care of all the parent attributes without manually having to add or change them.</p>
  <p>My idea would be like.</p>
  <ul>
  <li>Create temporary div</li>
  <li>load entire element into temporary div</li>
  <li>copy contents of temporary div and insertAfter target element</li>
  <li>remove temporary div</li>
  <li>remove the original/target div</li>
  </ul>
  <p>Would something like that work without big hickups and glitches while loading?</p>
  <p>Maybe someone has a solution for this. Thanks.</p>