title: Clearing HTML breaks append in jquery
body: <p>Below is the code for a simple javascript/jquery percent change calculator. The user enters the their two desired values in two separate forms and the result is returned in a div below. The there are two buttons, Calculate (calls the pChange function) and Clear the Div (calls the clear function). The function works fine until a user clears the answer div using the Clear function. After the clear button is pushed the function no longer appends the answer text to the answer text div.</p>
  
  <pre><code>//Percent change Calculation
  var pChange = function(){
      var a = document.getElementById("number1").value;
      var b = document.getElementById("number2").value;
      var c = b-a;
      var fOutPut = c / a;
      fOutput=fOutPut*100;
      var finalOut=fOutput.toFixed(2);
      $('#answerText').append("&lt;p&gt;&lt;strong&gt;" + "The percentage change is  "+finalOut+ "%" + "&lt;/strong&gt;&lt;/p&gt;");
  };
  
  //ClearPage Function
  var Clear = function(){
      $('#answer').html("");
  }; 
  //Submit via enter key press instead of button event.
  $("#number2").keyup(function(event){
      if(event.keyCode == 13){
          $("#Calc").click();
      }
  });
  </code></pre>
  
  <p>Also, The HTML</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="jquery-2.1.3.min.js"&gt;&lt;/script&gt;
          &lt;script src="materialize/js/materialize.min.js"&gt;&lt;/script&gt;
          &lt;script src="slidebars.min.js"&gt;&lt;/script&gt;
          &lt;link type="text/css" rel="stylesheet" href="materialize/css/materialize.css"  media="screen,projection"/&gt;
          &lt;title&gt;Percent Change Calculator&lt;/title&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  
          &lt;!-- Slidebars CSS --&gt;
          &lt;link rel="stylesheet" href="slidebars.css"&gt;
          &lt;link rel="stylesheet" href="Percent.css"
      &lt;/head&gt;
  
      &lt;body&gt;  
      &lt;!--Main content--&gt;
          &lt;div id="sb-site"&gt;
          &lt;div class="navbar-fixed"&gt;
            &lt;nav&gt;
      &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="mdi-navigation-menu"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;div class="nav-wrapper"&gt;
      &lt;div class="sb-toggle-left"&gt;
        &lt;a href="#" class="brand-logo"&gt;&lt;img class="navicon" src="navicon-round.svg"&gt;&lt;/img&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;a href="#" class="brand-logo center"&gt;Percent Change Calculator&lt;/a&gt;
        &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
          &lt;li&gt;&lt;a class="dropdown-button" href="#" data-activates="dropdown1"&gt;Math Tools&lt;i class="mdi-navigation-arrow-drop-down right"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;/div&gt;
    &lt;ul id="dropdown1" class="dropdown-content"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Percent Change&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="trianglecalculator.html"&gt;Triangle Calculator&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
          &lt;!--Alternate Menu Toggle--&gt;
  
          &lt;!--&lt;div id="ButtonContainer"&gt;
          &lt;div class="sb-toggle-left"&gt;
          &lt;div class="navicon-line"&gt;&lt;/div&gt;
          &lt;div class="navicon-line"&gt;&lt;/div&gt;
          &lt;div class="navicon-line"&gt;&lt;/div&gt;
          &lt;/div&gt;--&gt;
      &lt;div id="input-fields"&gt;
      &lt;div class="row"&gt;
      &lt;div class="input-field col s3"&gt;
          &lt;input value="Number #1" id="number1" type="number" class="validate"&gt;
          &lt;label class="active" for="number1"&gt;Number #1&lt;/label&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
          &lt;div class='input-field col s3'&gt;
          &lt;input value="Number #1" id="number2" type="number" class="validate"&gt;
          &lt;label class="active" for="number2"&gt;Number #2&lt;/label&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;div id='answer'&gt;
      &lt;div id='answerText'&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;table&gt;
      &lt;tr&gt;
      &lt;td&gt;
      &lt;button id = "Calc" type = 'button' onclick = "pChange();"&gt;Click to Calculate     Percent Change&lt;/button&gt;
      &lt;/td&gt;
      &lt;td&gt;
      &lt;button id = "Clear" type = 'button' onclick = "Clear();"&gt;Click to clear screen&lt;/button&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="sb-slidebar sb-left sb-width-custom" data-sb-width="140"&gt;
              &lt;!-- Your left Slidebar content. --&gt;
          &lt;ul id="dropdown2" class="dropdown-content"&gt;
          &lt;li&gt;&lt;a href="#"&gt;About Me&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About This Site&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul id="homedropdown" class="dropdown-content"&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#!"&gt;two&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#!"&gt;three&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;a class="btn dropdown-button" href="#!" data-activates="dropdown2"&gt;About&lt;i class="mdi-navigation-arrow-drop-down right"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="btn dropdown-button" href="#!" data-activates="homedropdown"&gt;Tools&lt;i class="mdi-navigation-arrow-drop-down right"&gt;&lt;/i&gt;&lt;/a&gt;
  
          &lt;div class="sb-slidebar sb-right"&gt;
  
          &lt;/div&gt;
  
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>