JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<h1>jQuery 1.9</h1>
<h2>expect:</h2>
<div class="expect indent">
	<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>');
var $add = $node.replaceWith($after)

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

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