kumarldh/hydra-head-vanilla-js.html

## hydra-head-vanilla-js.html
<!DOCTYPE html>
<html>
    <head>
        <title>Hydra - Delete one button & produce two more!</title>
        <meta charset="UTF-8">
    </head>
    <body id="hydrabody">
        <button class="hydrahead">Hydra Head</button>
    </body>
    <script>
document.addEventListener('click', function(e){
    if(e.target.className !=='hydrahead'){
        return;
    }
    var bd = document.getElementById('hydrabody');
    var lefthead = document.createElement('button');
    var righthead = document.createElement('button');
    lefthead.setAttribute('class','hydrahead');
    lefthead.innerHTML = 'Left Hydra Head';
    righthead.setAttribute('class','hydrahead');
    righthead.innerHTML = 'Right Hydra Head';
    bd.removeChild(e.target);
    bd.appendChild(lefthead);
    bd.appendChild(righthead);
});
    </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hydra - Delete one button & produce two more!</title>
	<meta charset="UTF-8">
	</head>
	<body id="hydrabody">
	<button class="hydrahead">Hydra Head</button>
	</body>
	<script>
	document.addEventListener('click', function(e){
	if(e.target.className !=='hydrahead'){
	return;
	}
	var bd = document.getElementById('hydrabody');
	var lefthead = document.createElement('button');
	var righthead = document.createElement('button');
	lefthead.setAttribute('class','hydrahead');
	lefthead.innerHTML = 'Left Hydra Head';
	righthead.setAttribute('class','hydrahead');
	righthead.innerHTML = 'Right Hydra Head';
	bd.removeChild(e.target);
	bd.appendChild(lefthead);
	bd.appendChild(righthead);
	});
	</script>
	</html>