JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<h1>jQuery 1.9</h1>
<h2>expect <span class="green">replaced</span></h2>
<div class="container"/>

CSS

.red {
  color: red;
}

.green {
  color: green;
}

.red, .green {
  font-weight: bold;
}

JavaScript

// prepare some disconnected content, e.g. compiling templates
var $node = $('<div class="red"><p>not replaced</p></div>');
// later do some calculations and have a need to replace some content
var $replace = $('<div class="green">replaced</div>');
$node.replaceWith($replace)

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

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