Creating elements using jQuery

Question

I've written a JS program which works fine if I use the following line of code:

    li = $("<li data-role='collapsible' data-iconpos='right' data-inset='false'></li>");

But if I change the above line to as follows, it stops working:

    li = $('<li/>, {
          data-role: 'collapsible'
          data-iconpos: 'right'
          data-shadow: 'false'
          data-corners: 'false'
    });

What is wrong here?

EDIT - Additional code that is failing:

    a = $('<a/>', {
        href: fSelectedContent[i].hPageURL,
        click: function () { mSelectCount(fSelectedContent[i].rContentID);},
        html: fSelectedContent[i].rContentName
    });

The first one is valid html while the second is not. It looks like you're missing an end quote after <li/>. — SimpleJ
– SimpleJ, Commented Aug 29, 2014 at 19:51
You're missing a single quote after the first argument to $: $('<li />') — Andrew Whitaker
– Andrew Whitaker, Commented Aug 29, 2014 at 19:52
Thanks folks. It worked like a charm. But my attempt to convert another line failed. Please see above. — Lafani
– Lafani, Commented Aug 29, 2014 at 20:37

Quentin · Accepted Answer · 2014-08-29 19:53:04Z

6

In a JavaScript object literal, a property name must be an identifier or a string.

An identifier cannot include a - character, so you have to use strings.

Quote your property names.

You also need a comma between each key:value pair.

You also need to put a quote to end the string for the <li/>.

li = $('<li/>', {
      "data-role": 'collapsible',
      "data-iconpos": 'right',
      "data-shadow": 'false',
      "data-corners": 'false'
});

answered Aug 29, 2014 at 19:53

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

3 Comments

rvignacio Over a year ago

and do not quote booleans.

Quentin Over a year ago

@rvignacio — They are data attribute values, so they are strings, not booleans.

rvignacio Over a year ago

@Quentin, the value false in JS is obviously a boolean, it isn't necessary to quote it, jQuery's .attr() method will put the quotes when adding it to the DOM, and more important, it will put the correct value for attributes like required (e.g.: try $('<div>', {required: false})).

ne1410s · Accepted Answer · 2014-08-29 20:06:34Z

2

An alternative would have been to use:

$('<li/>').attr({
    "data-role": 'collapsible',
    "data-iconpos": 'right',
    "data-shadow": false,
    "data-corners": false
});

But each to their own I guess :)

edited Aug 29, 2014 at 20:06

answered Aug 29, 2014 at 19:57

ne1410s

7,1126 gold badges60 silver badges63 bronze badges

5 Comments

gen_Eric Over a year ago

What do you mean by "consistent jQuery"?

ne1410s Over a year ago

I mean that .attr() function is provided as part of jQuery, so why not make use of it?

user2864740 Over a year ago

jQuery also provides $(html, attribtes), why not make use of it? That being said, I also prefer the attr form and such is not deserving of a downvote. But, take care not to implicitly deny the legality of the initial form and point out (in words) the problems with the original so that they can be easily recognized.

gen_Eric Over a year ago

Because $('<li/>, {...}) is also provided as part of jQuery and is smaller?

ne1410s Over a year ago

Like I say, each to their own

Brad · Accepted Answer · 2014-08-29 19:52:27Z

0

For string literals, if you want to have them roll to the next line you need to use a backslash at the end of the line.

var something = 'line 1 \
    line2';

In your case though, you're just missing an end-quote after <li/>.

$('<li/>', {

(And, do note Quentin's suggestion above of having proper object literal keys. You need to quote them if you have - in there, or other reserved characters. +1 Quentin.)

answered Aug 29, 2014 at 19:52

Brad

164k57 gold badges380 silver badges559 bronze badges

Collectives™ on Stack Overflow

Creating elements using jQuery

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related