Missing HTML Attribute Value With Spaces from jQuery

Question

I have some jQuery where I am appending text where some of their attributes take some js variables.

<script>
var className = "COS 102";
var teacher = "Bob Teacher";

$("#classesDiv").append("<div className="+className+" teacher="+teacher+" class='class'></div>");
</script>

The issue I am having is that when I pass these variables into the element it comes out looking like className="COS", without the 102 after.

Does anybody know why this is happening?

COS 102 is not a valid class name, that's a class name of COS and an invalid classname 102, refer here for a better explination — Brett Santore
– Brett Santore, Commented Jul 11, 2014 at 19:42
@BrettSantore it's not className as an HTML class, but a custom attribute className as in a school class. — Karl-André Gagnon
– Karl-André Gagnon, Commented Jul 11, 2014 at 19:43
Ah, sorry about that, should have read more thoroughly, saw className and reacted. — Brett Santore
– Brett Santore, Commented Jul 11, 2014 at 19:44

Mike · Accepted Answer · 2014-07-11 19:42:09Z

13

Because you don't have quotes around the attribute values.

Your code is going to append:

<div className=COS 102 ...

when it should append

<div className='COS 102' ...

This should work:

<script>
var className = "COS 102";
var teacher = "Bob Teacher";

$("#classesDiv").append("<div className='"+className+"' teacher='"+teacher+"' class='class'></div>");
</script>

answered Jul 11, 2014 at 19:42

Mike

4,09125 silver badges36 bronze badges

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

1 Comment

Nicolas Over a year ago

Hahaha! Thanks! I can't believe I missed this.

Karl-André Gagnon · Accepted Answer · 2014-07-11 19:47:32Z

4

Think about the string you're appending:

<div className=COS 102 teacher=Bob Teacher class='class'></div>

Since those attribute values aren't quoted, 102 and Teacher are seen as separate, value-less attributes. You'll want to get:

<div className='COS 102' teacher='Bob Teacher' class='class'></div>

by quoting:

$("#classesDiv").append("<div className='" + className + "' teacher='" + teacher + "' class='class'></div>");

Or, to be more jQuery-ish about it:

$('<div>').
  attr({
    'className' : className,
    'teacher' : teacher
  }).
  appendTo($('#classesDiv'));

An advantage to the last approach: it works even if teacher or className contain quotes (either single or double), or other characters that are meaningful to HTML.

edited Jul 11, 2014 at 19:47

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

answered Jul 11, 2014 at 19:43

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

1 Comment

Karl-André Gagnon Over a year ago

He's not trying to add a class, but an attribute className.

Blender · Accepted Answer · 2014-07-11 19:45:53Z

2

It's happening because you're constructing an element by joining strings together. As you can see, this approach is fragile. Construct the element by passing an object to jQuery's $ function:

var className = 'COS 102';
var teacher = 'Bob Teacher';

$('<div>', {
    className: className,
    teacher: teacher,
    'class': 'class'
}).appendTo('#classesDiv');

Also, custom attributes like className and teacher are not valid HTML. You must prefix them with data-:

$('<div>', {
    'data-className': className,
    'data-teacher': teacher,
    'class': 'class'
})

answered Jul 11, 2014 at 19:45

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

Missing HTML Attribute Value With Spaces from jQuery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related