JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class='container container1'>
    <div class='colors'>
        <div class='blue'></div>
        <div class='red'></div>
    </div>
    <div class='drinks'>
        <div class='soda'>coke</div>
        <div class='juice'></div>
    </div>
</div>    

<div class='container container2'>
    <div class='cars'>
        <div class='sedans'></div>
        <div class='vans'></div>
    </div>
    <div class='drinks'>
        <div class='soda'>mountain dew</div>
        <div class='coffee'></div>
    </div>
</div>

<pre></pre>

CSS

div { border: solid 1px #ddd; padding: 5px; }

JavaScript

copy($(".container1"), $(".container2"));
$("pre").text("Result:" + $("body").clone().children("pre").remove().end().html());

function copy(from, to) {
  from.children().each(function() {
    var match = to.children("." + this.className.split(' ').join('.'));
    if(match.length) {
      if(match.children().length == 0) match.replaceWith(this);
      else copy($(this), match);
    } else {
      to.append(this);
    }
  }).end().remove();
  from.remove();
}