Setting id from variable

Question

I would like to create an HTML object with jQuery and set the id from a variable but I don't know how it could work.

This is the code:

countArticle=eval("Count" + x+";");
copy.css("width", "96px");
copy.find("img").css("height", "50px");
copy.append("Anzahl: <span class='count' id="countArticle" )>"+ 1
+"</span>");
copy.appendTo("#target").fadeIn();

Does anyone know, how this could work?

user94559 · Answer 1 · 2016-07-01T18:54:00.020

2

copy.append("Anzahl: <span class='count' id='" + countArticle + "'>" + 1 + "</span>");

To concatenate strings, you use a plus sign.

So you want this string:

Anzahl: <span class='count' id='

then the value of countArticle, and then this string:

'>

Put the strings in double quotes, and you get:

"Anzahl: <span class='count' id='" +
countArticle +
"'>"

(Note that I also removed a right paren that didn't seem to belong there.)

edited Jul 01 '16 at 18:54

answered Jul 01 '16 at 18:49

user94559

59,196
6
103
103

2

a friendly tip, you might want to provide an explanation, OP is clearly asking for one :) – nem035 Jul 01 '16 at 18:51
@nem035, Most difficult thing to explain I guess ;) – Rayon Jul 01 '16 at 18:53

Chester Millisock Jr · Answer 2 · 2016-07-01T18:55:17.077

2

I think you just need to use + in your 4th line:

copy.append("Anzahl: <span class='count' id='" + countArticle + "' )>" + 1
        +"</span>");

edited Jul 01 '16 at 18:55

answered Jul 01 '16 at 18:50

Chester Millisock Jr

240
1
9

This would miss the quotes around the id value. – user94559 Jul 01 '16 at 18:51

Michael Lea Crawford · Answer 3 · 2016-07-01T18:51:25.430

1

Have you tried doing a concatenation?

copy.append("Anzahl: <span class='count' id='" + countArticle + "' )>"+ 1
    +"</span>");

edited Jul 01 '16 at 18:51

answered Jul 01 '16 at 18:50

Michael Lea Crawford

490
2
11

1

This would miss the quotes around the id value. – user94559 Jul 01 '16 at 18:50
Updated @smarx . Thanks for pointing out, though we seem to have similar answers anyway. Upvoted you. – Michael Lea Crawford Jul 01 '16 at 18:55

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

I generally prefer to define attributes via an object when creating elements with jQuery.

jQuery( html, attributes )

html
Type: htmlString
A string defining a single, standalone, HTML element (e.g. <div/> or <div></div>).

attributes
Type: PlainObject
An object of attributes, events, and methods to call on the newly-created element.

var $copy = jQuery('#copy'),
    countArticleID = 'countArticle',
    html = '<span />',
    attributes = {
      'id': countArticleID,
      'class': 'count',
      'text': 1
    },
    $count_element = jQuery(html, attributes);

$copy.append('Anzahl:', $count_element);

.count {
  padding: 0 .5em;
  margin: 0 0 0 .5em;
  border: 1px solid #AAA;
  border-radius: .25em;
}
#countArticle {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copy"></div>

Of course, the code can be shortened if brevity is important:

var countArticleID = 'countArticle';

jQuery('#copy').append('Anzahl:', jQuery('<span/>', {
  'id': countArticleID,
  'class': 'count',
  'text': 1
}));

.count {
  padding: 0 .5em;
  margin: 0 0 0 .5em;
  border: 1px solid #AAA;
  border-radius: .25em;
}
#countArticle {
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copy"></div>

For further reference, see Creating a div element in jQuery.

Setting id from variable

4 Answers4