JSFiddle - React, Tailwind, and code Playground

HTML

<h1>jQuery 1.8.3</h1>
<h2>expect:</h2>
<div class="expect indent">
	<div>before</div>
	<div class="green">after</div>
</div>
<h2>result:</h2>
<div class="result indent"/>

CSS

.indent {
  margin: 5px 25px;
}

.green {
  color: green;
  font-weight: bold;
}

JavaScript

// prepare some disconnected content, e.g. compiling templates
var $node = $('<div>before</div>');
// later do some calculations and have a need to splice some disconnected content together
var $after = $('<div class="green">after</div>');
$after.replaceWith($node)

// Add to the DOM
$('.result').append($after);

// The replacement fails in 1.9
// How to workaround without connecting the nodes to the DOM?