Databases
StackOverflow2013
Postsdbo
POHow to add dynamic HTML content (DIV) using JavaScript?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add dynamic HTML content (DIV) using JavaScript?
    text
    copied!<p>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 <strong>ajax</strong> below) but this is okay for <strong>demo</strong> page but for real code this is making me write loads of these html rendering in html code.</p> <p>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</p> <pre><code>&lt;div id="package-header-message"&gt; &lt;div class="spacer-vertical"&gt;&lt;/div&gt; &lt;div&gt;Your incident was submitted on December 04, 2013 at 11:38:53 am EDT. Your test-CERT Incident ID number is: &lt;/div&gt; &lt;div class="spacer-vertical"&gt;&lt;/div&gt; &lt;div class="bold left-indent"&gt;2013-testCERTv36LBQB&lt;/div&gt; &lt;div class="spacer-vertical"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The value <strong>2013-testCERTv36LBQB</strong> 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?</p> <p>I will appreciate if someone can help me define execution flow.</p> <p><strong>HTML</strong> </p> <pre><code>&lt;div id="frm"&gt; &lt;form name="frm" method="POST" action=""&gt; &lt;input type="text" name="name" id="name" value="" /&gt; &lt;input type="text" name="last_name" id="last_name" value="" /&gt; &lt;input type="submit" name="Update" id="update" value="Update" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- &lt;div id="region-content" class="grid-12 region region-content"&gt; &lt;div class="region-inner region-content-inner"&gt; &lt;a id="main-content"&gt;&lt;/a&gt; &lt;h1 id="page-title" class="title"&gt;Thank you for your incident submission.&lt;/h1&gt; &lt;div id="block-system-main" class="block block-system block-main block-system-main odd block-without-title"&gt; &lt;div class="block-inner clearfix"&gt; &lt;div class="content clearfix"&gt; &lt;div id="package-header-message"&gt; &lt;div class="spacer-vertical"&gt;&lt;/div&gt; &lt;div&gt;Your incident was submitted on December 04, 2013 at 11:38:53 am EDT. Your test-CERT Incident ID number is: &lt;/div&gt; &lt;div class="spacer-vertical"&gt;&lt;/div&gt; &lt;div class="bold left-indent"&gt;2013-testCERTv36LBQB&lt;/div&gt; &lt;div class="spacer-vertical"&gt;&lt;/div&gt; &lt;/div&gt; &lt;p&gt; 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: &lt;/p&gt;&lt;ul&gt; &lt;li&gt;Phone: +1 888-282-0870&lt;/li&gt; &lt;li&gt;Email: &lt;a href="mailto:soc@test.com" title="Send email to the Security Operations Center Email: soc@test-cert.gov"&gt;soc@test-cert.gov&lt;/a&gt;&lt;/li&gt; &lt;li&gt;Web: &lt;a href="/" title="Go back to the test-CERT Homepage"&gt;http://www.test-cert.gov/&lt;/a&gt;.&lt;/li&gt; &lt;/ul&gt; &lt;p&gt;&lt;/p&gt; &lt;p&gt; Secure phone and fax are available upon request. Contact test-CERT Watch at the above phone number to coordinate. &lt;/p&gt; &lt;p&gt;&lt;a title="Submit another incident report" href="/forms/report"&gt;Click here&lt;/a&gt; to submit another incident report or you can return to the &lt;a href="/" title="Go back to the test-CERT Homepage"&gt;test-CERT Homepage&lt;/a&gt;. &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;--&gt; </code></pre> <p><strong>ajax/jquery</strong></p> <pre><code> $("#update").click(function (e) { e.preventDefault(); var name = $("#name").val(); var last_name = $("#last_name").val(); var dataString = 'name=' + name + '&amp;last_name=' + last_name; alert(dataString); $.ajax({ type: "POST", url: "bin/process.php", data: dataString, success: function(data) { alert("ff"); // var ctrlArray = data.split('&amp;'); if(result.indexOf("pass") &gt; -1) //alert("ff"); $('#frm').html("&lt;div id='message'&gt;&lt;/div&gt;"); $('#message').html("&lt;h2&gt;Contact Form Submitted!&lt;/h2&gt;") .append("&lt;p&gt;We will be in touch soon.&lt;/p&gt;") .hide() .fadeIn(1500, function() { $('#message').append("&lt;img id='checkmark' src='images/check.png' /&gt;"); }); } }); return false; }) </code></pre> <p><strong><a href="http://jsfiddle.net/3e46s/" rel="nofollow">DEMO</a></strong></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload