Reload the DOM probelm

In this example below you will see how to do a Reload the DOM probelm with some HTML / CSS and Javascript

An examaple of how you cannot maniuplate already Manipulated DOM elements

Thumbnail
This awesome code was written by stevenamoore, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stevenamoore ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Reload the DOM probelm</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.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/stevenamoore/reload-the-dom-probelm-aAztp */
.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/stevenamoore/reload-the-dom-probelm-aAztp */
$('#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);
  });
});

Comments