I need help adding dynamic html on return of data from server side. I'm using ajax/jQuery to handle server-side processing requirements. Currently, the success code section of ajax I can write html elements (see ajax below) but this is okay for demo page but for real code this is making me write loads of these html rendering in html code.

In the HTML page I have included html code which I want to appear to the user when he clicks the submit button and hide the view (div id) at back. Can I tell JavaScript to add this html code dynamically? From server side I want to just pass the following value under

<div id=package-header-message>

            <div class=spacer-vertical></div>

            <div>Your incident was submitted on December 04, 2013 at 11:38:53 am EDT. Your test-CERT Incident ID number is: </div>

            <div class=spacer-vertical></div>

            <div class=bold left-indent>2013-testCERTv36LBQB</div>

            <div class=spacer-vertical></div>

          </div>  

The value 2013-testCERTv36LBQB I want it to set based upon response from server. I can do it under .ajax but can I also use javascript to append this value for me?

I will appreciate if someone can help me define execution flow.

HTML

<div id=frm>  

<form name=frm method=POST action=>

    <input type=text name=name id=name value= />

    <input type=text name=last_name id=last_name value= />

    <input type=submit name=Update id=update value=Update />

</form>

</div>  



<!-- <div id=region-content class=grid-12 region region-content>

  <div class=region-inner region-content-inner>

    <a id=main-content></a>

                <h1 id=page-title class=title>Thank you for your incident submission.</h1>

                        <div id=block-system-main class=block block-system block-main block-system-main odd block-without-title>

  <div class=block-inner clearfix>



    <div class=content clearfix>



          <div id=package-header-message>

            <div class=spacer-vertical></div>

            <div>Your incident was submitted on December 04, 2013 at 11:38:53 am EDT. Your test-CERT Incident ID number is: </div>

            <div class=spacer-vertical></div>

            <div class=bold left-indent>2013-testCERTv36LBQB</div>

            <div class=spacer-vertical></div>

          </div>                       

          <p>

            The test-CERT Watch staff may contact you based on the information submitted. If you have any questions regarding this incident or would like to provide test with any edits or changes to this information, please contact test-CERT Security Operations Center at:

            </p><ul>

              <li>Phone: +1 888-282-0870</li>

              <li>Email: <a href=mailto:[email protected] title=Send email to the Security Operations Center Email: [email protected]>[email protected]</a></li>

              <li>Web: <a href=/ title=Go back to the test-CERT Homepage>http://www.test-cert.gov/</a>.</li>

            </ul>

          <p></p>

          <p>

            Secure phone and fax are available upon request. Contact test-CERT Watch at the above phone number to coordinate.

          </p>

          <p><a title=Submit another incident report href=/forms/report>Click here</a> to submit another incident report or you can return to the <a href=/ title=Go back to the test-CERT Homepage>test-CERT Homepage</a>.

          </p>

              </div>

  </div>

</div>      </div>

</div>-->

ajax/jquery

  $(#update).click(function (e) {

        e.preventDefault();

        var name = $(#name).val();

        var last_name = $(#last_name).val();

        var dataString = 'name=' + name + '&last_name=' + last_name; 

alert(dataString);

        $.ajax({  

  type: POST,  

  url: bin/process.php,  

  data: dataString,  



   success: function(data) {  

      alert(ff);

  // var ctrlArray = data.split('&'); 

 if(result.indexOf(pass) > -1)      

//alert(ff);

    $('#frm').html(<div id='message'></div>);  

    $('#message').html(<h2>Contact Form Submitted!</h2>)  

    .append(<p>We will be in touch soon.</p>)  

    .hide()  

    .fadeIn(1500, function() {  

      $('#message').append(<img id='checkmark' src='images/check.png' />);  

    });  

  }  

});  

return false;



  })

DEMO