mkuklis/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      a {
        text-decoration:none;
      }
      a:hover {
        text-decoration:none;
      }
      a:active {
        text-decoration:none;
      }
      a:visited {
        text-decoration:none;
      }

      #experiment_button {
        background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.18, #9082DE), color-stop(0.59, #AD9CFF));
        background-image:-moz-linear-gradient(center bottom, #9082DE 18%, #AD9CFF 59%);
        padding:20px 20px 10px;
        margin:20px;
        -webkit-border-radius:5px;
        color:#000;
        font-family:Arial;
        font-weight:400;
        font-style:normal;
        -webkit-border-radius:5px;
      }

      #experiment_button:active {

        background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.18, #AD9CFF), color-stop(0.59, #6251C4));

        background-image:-moz-linear-gradient(center bottom, #AD9CFF 18%, #6251C4 59%);
      }
      #new_transform_body {
        height:100px;
        width:50px;
        margin-top:20px;
        padding-right:40px;
        background-color:#a9a4c4;
      }
    </style>
  </head>
  <body>
    <a id="experiment_button">New</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
      var module = (function () {
        var create = function () {
          var x = $('<div></div>').attr('id', "encapsulating_new").appendTo('body').bind('click', remove);
          $('<div></div>').attr('id', "new_transform_body").css({
            'text-align': 'center',
            'cursor': 'pointer'
          }).text('"I am a new DIV!"').appendTo(x);
        }
        var remove = function () {
          $(this).remove();
        }
        // public api
        return {
          create: create
        }
      })();

      // wait for DOM to load
      $(function () {
        $('#experiment_button').bind('click', module.create);
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css">
	a {
	text-decoration:none;
	}
	a:hover {
	text-decoration:none;
	}
	a:active {
	text-decoration:none;
	}
	a:visited {
	text-decoration:none;
	}

	#experiment_button {
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.18, #9082DE), color-stop(0.59, #AD9CFF));
	background-image:-moz-linear-gradient(center bottom, #9082DE 18%, #AD9CFF 59%);
	padding:20px 20px 10px;
	margin:20px;
	-webkit-border-radius:5px;
	color:#000;
	font-family:Arial;
	font-weight:400;
	font-style:normal;
	-webkit-border-radius:5px;
	}

	#experiment_button:active {

	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.18, #AD9CFF), color-stop(0.59, #6251C4));

	background-image:-moz-linear-gradient(center bottom, #AD9CFF 18%, #6251C4 59%);
	}
	#new_transform_body {
	height:100px;
	width:50px;
	margin-top:20px;
	padding-right:40px;
	background-color:#a9a4c4;
	}
	</style>
	</head>
	<body>
	<a id="experiment_button">New</a>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
	var module = (function () {
	var create = function () {
	var x = $('<div></div>').attr('id', "encapsulating_new").appendTo('body').bind('click', remove);
	$('<div></div>').attr('id', "new_transform_body").css({
	'text-align': 'center',
	'cursor': 'pointer'
	}).text('"I am a new DIV!"').appendTo(x);
	}
	var remove = function () {
	$(this).remove();
	}
	// public api
	return {
	create: create
	}
	})();

	// wait for DOM to load
	$(function () {
	$('#experiment_button').bind('click', module.create);
	});
	</script>
	</body>
	</html>