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?

• Ram: Why are you using eval?

Answer 1

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.)

• nem035: a friendly tip, you might want to provide an explanation, OP is clearly asking for one :)
• Rayon: @nem035, Most difficult thing to explain I guess ;)

Answer 2

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

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

• user94559: This would miss the quotes around the id value.

Answer 3

Have you tried doing a concatenation?

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

• user94559: This would miss the quotes around the id value.
• Michael Lea Crawford: Updated @smarx . Thanks for pointing out, though we seem to have similar answers anyway. Upvoted you.

Answer 4

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.