JSFiddle - React, Tailwind, and code Playground

.html() replace vs .detach() then .html()

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="container"><button id="button">Click me</button></div>

<ul>
<li><a href="#" id="one">.html() replace</a></li>
<li><a href="#" id="two">.detach() then place with .html()</a></li>
</ul>

<div id="target"></div>

CSS

#target {
  width: 100px;
  height: 100px;
  background: red;
}

#target.active {
  background: orange;
}

JavaScript

$('#button').click(function () {
	$('#target').toggleClass('active');
});

$('#one').click(function (e) {
	e.preventDefault();
  
	var $button = $('#button');
  
  $button.html('Click me now!');
  
  $('#container').html($($button[0]));
});

$('#two').click(function (e) {
	e.preventDefault();
  
  var $container = $('#container').detach();
  var $button = $container.find('#button');
  
	// Use $.fn.detach() to detach the DOM element from the page before putting it back in. This way the event listeners remain attached.
	$button.detach();
  
  $button.html('Click me now!');
  
  $container.html($($button[0]));
  
  $('body').prepend($container);
});