jQuery getting isn't getting the html for an element

Question

I am using Jasmine to text and setting fixtures.

I have this following test code here which demonstrates a problem:

describe("foo", function() {

var $input = $('<input type="text" name="testfield" value="10" id="testInput">');
var $textArea = $('<textarea name="textarea" id="testTextArea">10</textarea>');
console.log( 'typeof: $input.get(0)' + ' ' + typeof $input.get(0) ); //object
console.log( 'typeof: $input[0]' + ' ' + typeof $input[0] ); //object
console.log( 'typeof: $input[0].toString()' + ' ' + typeof $input[0].toString() ); //string

beforeEach(function(){
    var html =  $input[0] + $textArea[0];
    var ghtml =  $input[0] + $textArea[0];
    $('body').append(html);
    $('body').append(ghtml); 
    $('body').append(ghtml + html );
    $('body').append( $input[0] );
    $('body').append( $textArea[0] );
    $('body').append( $input[0] + '' + $textArea[0]);
    $('body').append( $input[0] + $textArea[0]);
    $('body').append( $input.get(0) + $textArea.get(0) );
    $('body').append( $input.get(0) + ' ' + $textArea.get(0) );
    $('body').append( $input.html() + $textArea.html() );
    $('body').append( $input[0].toString() + $textArea[0].toString() );
    $('body').append( ($input[0].toString()) + ($textArea[0].toString()) );
    $('body').append( ($input.get(0).toString()) + ($textArea.get(0).toString()) );
    $('body').append( ($input.get(0).toString()) + ' ' + ($textArea.get(0).toString()) );


    setFixtures( html );
});  

   it("has a value of bar", function() {
     expect(foo).toBe('bar');
   });
});

Ignoring what the test does itself, look at what I am trying to append to the body tag. What I want is the actual html element to be appended, and for whatever reason I getting back an html object.

Please see the fiddle: http://jsfiddle.net/sidouglas/e6jau1mq/9/

Is this a Jasmine issue or a PEBKAC issue?

Thank you Simon.

Answer 1

.append takes the actual HTML string, so just use that instead of the jQ object:

var $input = '<input type="text" name="testfield" value="10" id="testInput">'
var $textArea = '<textarea name="textarea" id="testTextArea">10</textarea>'