JSFiddle - React, Tailwind, and code Playground

HTML

<div id=target>target1</div>
<br/>
======
<br/>
=======
<br/>

<div id =list>
<ul>
<li><img id=1 src="http://images.wikia.com/maditsmadfunny/images/5/54/Hulk-from-the-movie.jpg">foo</img></li>
<li><img id=2 src="http://images.wikia.com/maditsmadfunny/images/5/54/Hulk-from-the-movie.jpg">bar</img></li>
<li><img id=3 src="http://images.wikia.com/maditsmadfunny/images/5/54/Hulk-from-the-movie.jpg">hulk</img></li>
<ul>
</div>

JavaScript

$('img').click(function(){
    alert(' Before swap HTML in target is :==> ' + $('#target').html());

        var targetHtml = $('#target').html();
        var listHtml = $(this).parent().html();

        $('#target').html(listHtml);
        $(this).parent().remove();
        $('#list:last').append(targetHtml);
    
    alert(' After swap HTML in target is :==> ' + $('#target').html());
});