jQuery object to string help please

Question

I am creating a jquery object like so:

 htmlCode = $("<div id='"+data.layoutDescriptions[i].id+"'></div");

It seems to be missing some elements mainly when I am doing this:

if(data.type == "ListView"){

    htmlCode.append("<SELECT property='"+ data.property +"' size="+ data.listProps.length +" multiple>");
    i = 0;
    while(i < data.listProps.length){

        htmlCode.append("<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>");
        i++;
    }
    htmlCode.append("</SELECT>");

}

where data is a Json object.

When i do this as a string it works. e.g. instead of

htmlCode.append("<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>");

i would do

htmlCode = htmlCode + "<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>";

I want to find out what is missing so I want to see the Object i have tried the following:

alert(JQuery.htmlCode.stringify());

alert(htmlCode.html);

Nether work.

Any Ideas??

Thanks.

[There is no such thing as a JSON object](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/). — Felix Kling, Aug 13 '12 at 14:01
I you want to inspect the element, just do `console.log(htmlCode)` and have a look at the console. It's much easier to examine than HTML. — Felix Kling, Aug 13 '12 at 14:03

Anthony Grist · Accepted Answer · 2012-08-13T14:13:54.097

Your first line of code

htmlCode = $("<div id='"+data.layoutDescriptions[i].id+"'></div");

declares the variable htmlCode as a jQuery object containing a single <div> element (defined by the HTML you passed to the function).

When you call

htmlCode.append("<SELECT property='"+ data.property +"' size="+ data.listProps.length +" multiple>");

you're appending a <select> element (again, defined by the HTML passed to the function) to the end of that <div> element, which works fine.

However, when you call

htmlCode.append("<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>");

you're also appending an <option> to the <div> element, not to the <select> element which is what you want.

It seems like you're trying to build a HTML string using a jQuery object and the .append() function, but that's not what jQuery does. jQuery works with actual elements, it just lets you pass HTML to create them.

score 1 · Answer 2 · edited May 23 '17 at 12:12

1

To get a string representation of DOM elements you can use what was posted in this other question.

However, using the methods provided in the other answers (console.log or Firebug) seem to be the easier choice because they work without code modifications.

edited May 23 '17 at 12:12

Community

1
1

answered Aug 13 '12 at 14:01

codeling

11,056
4
42
71

That won't work since `htmlCode` contains DOM elements (circular structures and everything... it won't be possible to represent this as JSON). – Felix Kling Aug 13 '12 at 14:03
Thanks for the hint. My Javascript seems to have gotten rusty. I should leave proper answers to people who know more Javscript than me ;) – codeling Aug 13 '12 at 14:06

score 0 · Answer 3 · answered Aug 13 '12 at 14:03

0

You should use Firefox/Firebug to see you objects, browse through them, change them, ...

answered Aug 13 '12 at 14:03

Asciiom

9,867
7
38
57

1

...or any modern browser with built in debugger/developer tools. – Lee Taylor Aug 13 '12 at 14:06
While not bad advice this isn't an answer to the question and should have been posted as a comment instead. – Anthony Grist Aug 13 '12 at 14:14
The moment I posted this I didn't have enough rep to comment :) – Asciiom Aug 13 '12 at 14:24

score 0 · Answer 4 · answered Aug 13 '12 at 14:28

Try something like:

if(data.type == "ListView"){
   var options;
   htmlCode.append("<SELECT property='"+ data.property +"' size="+ data.listProps.length    +" multiple></SELECT>");
   i = 0;
   while(i < data.listProps.length){

       options+="<OPTION value='"+ i+1 +"'>"+ data.listProps[i] +"</OPTION>";
       i++;
   }
   $(htmlCode).find('select').html(options);

}

Here is a demo Demo

jQuery object to string help please

4 Answers4