JQuery append() doesn't append

Question

I've got html structure like this:

<div id="things">
    <div class="whatever">
        <div class="frame">content</div>
        <div class="frame">content</div>
        <div class="frame">content</div>
    </div>
</div>

And I got JS with JQuery script that works on click on button on that page:

function intsaver(){

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("POST", "intsaver.php", true);
    var tosf = $('<div></div>');
    $("#things").find(".frame").each(function(){
        tosf.append($(this).innerHTML);
        alert(''+tosf);
    });
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("data=" + tosf.innerHTML);
}

I can see this contents in debugger, they are exactly what I'm looking for. But tosf remains undefined and on server side I recieve undefined.

I've tried some ways, for examle, I appended this itself. As result, div's disappeared from page, but tosf remained undefined.

I believe I've made some obvious mistake.

Answer 1

Change

tosf.append($(this).innerHTML);

To

 tosf.append($(this).html());//$(this) a jQuery object

Or

tosf.append(this.innerHTML);//this a dom object

$(this) is a jQuery object not a dom object which doesn't have property innerHTML.Use .html() instead.