Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="parent">parent element</div>
  <button id="button">add animated child </button>
</body>
</html>
 
div {
  background: rgba(0,0,0,0.4);
  border: 1px black solid;
  padding: 5px;
  color: white;
}
 
var btn = document.getElementById('button');
btn.addEventListener('click', function() {
  var parent = document.getElementById('parent');
  var child = document.createElement('div');
  child.innerHTML = 'child element';
  child.style.transition = 'all 1s';
  parent.appendChild(child);
  child.style.margin = '40px';
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x