Reload the DOM probelm

An examaple of how you cannot maniuplate already Manipulated DOM elements

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Reload the DOM probelm</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class='primary'>
  <div id='replacable'>
    <button id='replace-me'>click to replace</button>
  </div>
  <div class='replacer' id='replacer1'>
    <button class='go-back'>go back</button>
    this is replacer1
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.primary {
  width: 20em;
  height: 20em;
  margin: 5%;
  background-color: green;
}

#replacable {
  margin: 2.5em;
  width: 15em;
  height: 15em;
  background-color: blue;
}

.replacer {
  display: none;
}
/* Downloaded from https://www.codeseek.co/ */
$('#replace-me').on('click', function(){
  var content = $('#replacer1').html();
  var old_content = $(this).parent().html();
  $(this).parent().html(content);
  
  $('.go-back').on('click', function(){
    $(this).parent().html(old_content);
  });
});

This awesome code ( Reload the DOM probelm ) is write by Steven Moore, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Steven Moore