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();
});