How do I use the jQuery $.each method to output proper HTML?

Question

HTML:

<div id="twitter" style="float:left;">
    <span></span>
</div>

jQuery:

        var obj = JSON.parse(data);

        $.each(obj.items, function (i, item) {
            $("span", this).html("('<p>" + item.title + "</p>')").appendTo("#twitter");
            if (i == 5) return false;
        });

I'm obviously doing something wrong, and can't seem to figure this out. I know the $.each method works, as I'm able to put alert(item.title) and get the expected result.

Basically all I want to do is, loop through the item and output:

<p> title </p>
<p> title 2 </p>

I just can't seem to figure this out

Answer 1

Without knowing what your JSON looks like, it's difficult to say what you ought to be doing:

$(obj.items).each(function(i,o){
  $("<p>").text(o.title).appendTo("#twitter > span");
  if (i == 5) return false;
});

Or possibly even:

for (var i = 1; i <= 5; i++) {
  $("<p>").text(o[i].title).appendTo("#twitter > span");
}

In reality, it's a little odd to be putting paragraphs within span tags.

Answer 2

   var obj = JSON.parse(data); 

    $.each(obj.items, function (i, item) { 
        $("<p>" + item.title + "</p>").appendTo("#twitter > span"); 
        if (i == 5) return false; 
    });