Jquery String + Object + String

Question

I have a small issue that I cannot seem to resolve.

Here goes... I have an input being created like this...

var input = $('<input/>');

If I do this....all is good

$(this).append(input);

If I do this though....

$(this).append('<div>' + input + '</div>');

It appends a div with the html [object Object]

Can someone guide me in the right direction?

Thank you in advance!

+ is for concatenating strings. input is a jQuery object, not a string. — Barmar
– Barmar, Commented Sep 15, 2014 at 16:38
I knew this was the issue, I was just not sure if there was a function to convert an object to a string. — VIDesignz
– VIDesignz, Commented Sep 15, 2014 at 16:42

Arun P Johny · Accepted Answer · 2014-09-15 16:42:35Z

1

you could

$('<div />').append(input).appendTo(this);

Demo: Fiddle

The problem is input is an jQuery object so when you use it in a string concatenation it will result in [object Object](default toString() for an object);

Or

var input = $('<input/>');
$('<div />', {
    append: input
}).appendTo(this);

Demo: Fiddle

edited Sep 15, 2014 at 16:42

answered Sep 15, 2014 at 16:37

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

VIDesignz Over a year ago

Is there a method or function to turn an object into a string?

Arun P Johny Over a year ago

@VIDesignz see this answer by trueblueaussie- if you want it as a string then why are you creating it as an jQuery object

VIDesignz Over a year ago

I find it easier to create as an object, but your question is valid. Is it advisable to just work with objects rather than strings when creating elements?

Arun P Johny Over a year ago

@VIDesignz I would mostly work with objects... but then at the end I would use that object not the generated string... else I would try to generate the markup directly using strings

Arun P Johny Over a year ago

@VIDesignz why do you want to have the html for your concatenation where you could easily use the object itself

|

iCollect.it Ltd · Accepted Answer · 2014-09-15 16:38:01Z

1

You need to work with all strings, or all jQuery objects:

e.g.

$(this).append($('<div>').append(input));

or

$(this).append('<div>' + input[0].outerHTML + '</div>');
// I think this version is ugly :)

Notes:

$('<div>') creates a new jQuery DOM element, which can then have child content appended.
input[0].outerHTML will return the text string equivalent to the DOM objects HTML

answered Sep 15, 2014 at 16:38

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

4 Comments

Arun P Johny Over a year ago

I don't think input.html() will work as .html() will return innerHTML... input element does not have innerHTML

iCollect.it Ltd Over a year ago

@Arun P Johny: Yep, too quick. Corrected (horrible solution though)

VIDesignz Over a year ago

Although all the other answers are pretty much the same, I was after a solution to which could convert an object to a string. This seems to be the way.

iCollect.it Ltd Over a year ago

Not as pretty, but the DOM outerHTML will do the trick. Good luck with your project.

Collectives™ on Stack Overflow

Jquery String + Object + String

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related