Assistance with HTML structure building with JQ

Assistance with HTML structure building with JQ

Hey all.

I have been finding tutorials all over the place and have managed to get this far without needing very specific help.  So, I feel rather proud :)

Anyways, here is my code base thus far:

  1.  $.getJSON("search.php?jsoncallback=?", function(data) {
  2.                  
  3.         //loop through all items in the JSON array
  4.         for (var x = 0; x < data.length; x++) {
  5.                    
  6.             //create a container for each comment
  7.             var div = $("<div>").addClass("entry round").appendTo("#characters");
  8.                        
  9.             //add author name and comment to container
  10.             $("<img>").addClass("char-img").attr("src", data[x].charimg).appendTo(div);
  11.             $("<h2>").text(data[x].posting_title).appendTo(div);
  12.             $("<p>").text(data[x].description).appendTo(div);
  13.             $("<p>").addClass("tags").wrapInner("<span>Tags:</span>").appendTo(div);
  14.            
  15.         }
  16.     });   

So, all of that code works perfectly.

My problem area happens on line 13.  I am trying to make the HTML come out like this:

  1. <p class="tags">
  2. <span>Tags:</span>
  3. <a href="#">1</a>,
  4. <a href="#">2</a>,
  5. <a href="#">3</a>
  6. </p>

This structure is consistent and the 1/2/3 are replaced with my variable names and the # will be replaced with variable links as well.  So, my question is how do I get the "<a></a>" (there will always be 3 links) to come in after the "wrapInner span" that I have on line 16 of my JS code.

Thanks!