JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div>
  <button id="trigger">Run</button>
</div>

<div id="target">
  <header class="header">Header</header>
  <div class="content">
    <p>Phasellus viverra nulla ut metus varius laoreet. Vestibulum ullamcorper mauris at ligula. Suspendisse eu ligula. Quisque malesuada placerat nisl. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede.</p>
    <p>In ut quam vitae odio lacinia tincidunt. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Duis leo.</p>
  </div>
  <footer class="footer">Footer</footer>
</div>

<div id="inject"></div>

CSS

#target{
  display: none;
}

JavaScript

let _target = document.getElementById('target'),
    _trigger = document.getElementById('trigger'),
    _inject = document.getElementById('inject');
    
_trigger.addEventListener('mousedown', (e) => {

	console.log('down');

	let str = _target.innerHTML;
  
  let el = document.createElement('div');
  el.innerHTML = str;
  
  el.querySelector('.header').style.opacity = Math.random();
  
  _trigger.stored_result = el;
  
  console.log('stored', _trigger.stored_result);
  
});

_trigger.addEventListener('click', (e) => {

	console.log('up');
  
  _inject.innerHTML = '';
  let rendered = _inject.appendChild(_trigger.stored_result);
  
  console.log('rendered', rendered);
  
});