JSFiddle - React, Tailwind, and code Playground

by cedric_tarou

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="container">
      <button class="btn btn-primary mt-3" id="btn">Add Buttom</button>
      <div id="parent" class="mt-5"></div>
    </div>
  </body>

</html>

CSS

.red {
  color: red;
}

.blue {
  background-color: blue;
}

JavaScript

const parent = document.getElementById('parent');
const btn = document.getElementById('btn');

function change() {

  function change2() {
    btn2.classList.remove('btn-danger');
    btn2.classList.add('btn-primary');
  }

  const btn2 = document.createElement('button');
  btn2.textContent = 'change color';
  btn2.classList.add('btn', 'btn-danger', 'mr-2', 'mb-2');
  parent.appendChild(btn2);


  btn2.addEventListener('click', () => {
    change2();
  });

}



btn.addEventListener('click', () => {
  change();
});