show/hide html content in javascript
<p>I have response which is coming from backend . Now i want to create some links, if i click those links it should display html content below that link and if i click that link again those html content should go. I know jquery hide() and show() . But here i am using for loop and i am not able to find DOM element ,
as follows,</p>

<pre><code>var html = "&lt;div id=finalDiv&gt;&lt;/div&gt;";
$("#finalDiv").dialog();
var ht;
for(var i in response) {
  ht +="&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;A:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;a onclick=\"showOneLink('"+response[i].B+"','"+i+"')\" &gt;'"+response[i].A+"'&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
  ht += "&lt;tr&gt;&lt;td&gt;&lt;div id=show'"+i+"'Link style='dislay:none;'&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;";
}
$("#finalDiv").append(ht);
</code></pre>

<p>Now when i click showOneLink , hidden div should display but that div's DOM will not be created . As ,</p>

<pre><code>function showOneLink(B,i) {
  var htm = "&lt;b&gt;log:'"+B+"'&lt;/b&gt;";
  $("#show"+i+"Link").css('display','block');
  $("#show"+i+"Link").append(htm);
}
</code></pre>
