append li into another li

Question

I have an unordered list with userid attr (i.e. uid).

<li uid="1">KEY A</li>
<li uid="2">KEY B</li>
<li uid="3">KEY C</li>
<li uid="4">KEY D</li>
<li uid="5">KEY E</li>
<li uid="6">KEY F</li>

I'm using jQuery to get the uid using $(this).attr('uid') and pass it to A page that will look up the id and return a value. The code i'm using to send the data is as below.

<script>
$(document).ready(function(){
  $("li").click(function(){
  var val = $(this).attr("uid");
$.post("tree-process.php",{val:val},function(response){
    alert(response);
    });
  });
});
</script>

This response value will be in an ul like below:

<ul>
  <li uid="1">VAL A</li>
  <li uid="2">VAL B</li>
</ul>

I need the ul response to be inserted inside the clicked li such as below :

<li uid="1">KEY A</li>
  <ul>
    <li uid="1">VAL A</li>
    <li uid="2">VAL B</li>
  </ul>
</li>

How do I append the response value to the li?

thank you !!

Answer 1

$("li").click(function() {
   var uid =  $(this).attr('uid');
    // pass the uid to the next page and get the response
    var response = functionName(uid);// some function call back to get the <ul> corresponding to that li uid

   // Now add the response which is a ul to the li

     if($(this).find('ul').length===0) {
      $(this).append(response); 
    }
   // insert your response there
});

As per your code

$(document).ready(function(){
  $("li").click(function(){
  var self = this;
  var val = $(this).attr("uid");
   $.post("tree-process.php",{val:val},function(response){
       if($(self).find('ul').length===0) {
          $(self).append(response);
        }
    });
  });
});

JSBIN Sample