JSFiddle - React, Tailwind, and code Playground

by octatone

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;
}

.red {
  color: red;
}

.green {
  color: green;
}

.red, .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>');
$node.after($after)

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

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