title: Change the text in a div using jquery after form submit
body: <p><strong>Edit</strong> I realized my error shortly after posting this. The <code>append</code> should be <code>html()</code> or <code>text()</code></p>
  
  <p>Partial code:</p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
          $(document).ready(function(){
              $('#resetpassword').validate(
              {rules: {
                  secretAnswer: {
                      required: true
                  }
              },
  
              messages: {
                  secretAnswer: {
                      required: "Please answer your security question"
                  }
              },
              submitHandler: function(form){
                  $.post("../BackgroundOperations/resetpassword.php",
                      $('#resetpassword').serialize(),
                      function(data){
                          if(data.status == 0){
                              $('#message').append("&lt;span class='error'&gt;Error: " + data.message + "&lt;/span&gt;");
                          }
                          else{
                              $('.container').hide();
                              $('.short_explanation').hide();
                              $('#message').text(data.message);
                          }
                      },
                  "json");
              }
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Form Code Start --&gt;
  &lt;div id='fg_membersite'&gt;
  &lt;form id='resetpassword' method='post' accept-charset='UTF-8'&gt;
  &lt;fieldset &gt;
  &lt;legend&gt;Reset Password&lt;/legend&gt;
  
  &lt;div class='short_explanation'&gt;* required fields&lt;/div&gt;
  &lt;input type='text'  class='spmhidip' name='&lt;?php echo $vm-&gt;GetSpamTrapKey(); ?&gt;' /&gt;
  
  &lt;div id="message"&gt;&lt;/div&gt;
  &lt;div class='container'&gt;
      &lt;label for='emailAddress' &gt;Email Address:&lt;/label&gt;&lt;br/&gt;
      &lt;input type='text' name='emailAddress' id='emailAddress' maxlength="100" readonly="true" value="&lt;?php echo $vm-&gt;GetEmailAddress() ?&gt;" /&gt;&lt;br/&gt;
  &lt;/div&gt;
  &lt;div class='container'&gt;
      &lt;label for='secretQuestion' &gt;Security Question:&lt;/label&gt;&lt;br/&gt;
      &lt;input type='text' name='secretQuestion' id='secretQuestion' value='&lt;?php echo $vm-&gt;GetSecretQuestion() ?&gt;' maxlength="100" readonly="true" width="100" /&gt;&lt;br/&gt;
  &lt;/div&gt;
  &lt;div class='container'&gt;
      &lt;label for='secretAnswer' &gt;Answer:&lt;/label&gt;&lt;br/&gt;
      &lt;input type='text' name='secretAnswer' id='secretAnswer' maxlength="50" /&gt;&lt;br/&gt;
  &lt;/div&gt;
  &lt;div class='container'&gt;
      &lt;input type='submit' name='Submit' value='Submit' /&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>I'm testing invalid input (wrong security answer). When I put the wrong answer and submit the form the <code>&lt;div id="message"&gt;</code> gets updated with the error message, but if I keep submitting invalid data the <code>&lt;div id="message"&gt;</code> keeps the old error message with a new one added on the end instead of having just a single message.</p>