JSFiddle - React, Tailwind, and code Playground

by btipling

HTML

<div id="button-container">
    <button id="test-button">Test!</button>
</div>
 <h2>Controls</h2>

<div id="controls">
    <button id="attach-event">Attach event</button>
    <button id="detach-event">Detach event</button>
    <button id="destroy-element">Destroy element</button>
    <button id="create-element">Create element</button>
    <button id="attach-element">Attach element</button>
    <button id="detatch-element">Detach element</button>
</div>
 <h2>Log</h2>

<div id="log"></div>

CSS

#log {
          width: 300px;
          height: 200px;
          border: 1px solid #000;
          padding: 10px;
          overflow-x: hidden;
          overflow-y: auto;
      }
      #log p {
          border: 0px solid #CCC;
          border-bottom-width: 1px;
      }

JavaScript

function log(msg) {
          $('#log').prepend($('<p>' + msg + '</p>'));
      }

      function logClick() {
          log('Click!');
      }

      function attachEvents() {
          log('attaching events');
          document.getElementById('test-button').addEventListener('click', logClick);
      }


      function detachEvents() {
          log('detatching events');
          document.getElementById('test-button').removeEventListener('click', logClick);
      }

      function destroyElement() {
          log('Destroying element');
          $('#button-container').html('');
      }

      function createElement() {
          log('Creating element');
          $('#button-container').html($('<button id="test-button">Test!</button>'));
      }

      var element;

      function attachElement() {
          log('attaching element');
          if (element) {
              document.getElementById('button-container').appendChild(element);
              element = null;
          }
      }

      function detatchElement() {
          log('detatching element');
          element = document.getElementById('test-button');
          element.parentNode.removeChild(element);
      }

      function main() {
          log('Starting up!');
          $('#attach-event').on('click', attachEvents);
          $('#detach-event').on('click', detachEvents);
          $('#destroy-element').on('click', destroyElement);
          $('#create-element').on('click', createElement);
          $('#attach-element').on('click', attachElement);
          $('#detatch-element').on('click', detatchElement);
      }
      main();