jquery - assign variable inside a .html()

Question

i++;   
 $("#test").html("<iframe id='i' src='arr[0]'></iframe>");

I want to assign the value of the array to the iframe source as shown here. This doesn't work however. How is this possible? Thanks

Does it work with other elements? I would say, you also have to reload the page inside the iframe, to see any changes. — sascha, Nov 02 '11 at 11:15

score 3 · Accepted Answer · answered Nov 02 '11 at 11:14

3

$("#test").html("<iframe id='" + i + "' src='" + arr[0] + "'></iframe>");

answered Nov 02 '11 at 11:14

Steve

2,971
7
38
63

Widor · Answer 2 · 2011-11-02T11:25:17.737

2

You need to use concatenation:

$("#test").html("<iframe id=\"" + i + "\" src=\"" + arr[0] + "\"></iframe>");

Edited to match updated question

edited Nov 02 '11 at 11:25

answered Nov 02 '11 at 11:14

Widor

13,003
7
42
64

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

Why your code doesn't work as expected:

$("#test").html("<iframe id='i' src='arr[0]'></iframe>");

generates the html output:

<div id="test">
    <iframe id='i' src='arr[0]'></iframe>
</div>

Your variables are in fact outputted as literals, since you're not using any escaping/concatenation (see this article for JS string 101).

What you can do to make it work:

While the other answers are correct, consistently using single quotes for strings makes HTML concatenation way more fun (as attribute values should usually be in double quotes):

i++;   
$("#test").html('<iframe id="' + i + '" src="' + arr[0] + '"></iframe>');

What you can do to make it work even more hassle-free for you:

It might be overkill if you need to concatenate just once. In the long run though, this approach by @Zippoxer makes your life much easier when you have to insert values into strings:

String.prototype.format = function() {
    var formatted = this;
    for(arg in arguments) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

Usage in your case:

$("#test").html('<iframe id="{0}" src="{1}"></iframe>'.format(i, arr[0]));

+1 I was going to go down the `.replace` route. That's how I usually do my in-string replacing. I thought it may be a bit much for the OP given their apparent skill-level. Most thorough answer though. Nice little prototype function, I think I'll steal it :) — El Ronnoco, Nov 02 '11 at 11:30
@ElRonnoco Thanks. Be sure to check [this thread](http://stackoverflow.com/questions/610406/javascript-equivalent-to-printf-string-format) too, there's neat alternatives ;) — vzwick, Nov 02 '11 at 11:32
@ElRonnoco Also, make sure to check out [underscore.string](https://github.com/epeli/underscore.string#readme) (usable independently from the underscore lib, too). — vzwick, Nov 02 '11 at 11:50

score 1 · Answer 4 · answered Nov 02 '11 at 11:17

try this...

$("#test").html("<iframe id='" + i + "' src='" + arr[0] + "'></iframe>");

What you are doing with $("#test").html("<iframe id='i' src='arr[0]'></iframe>"); is setting the id to the literal character "i" and setting the src to the literal string "arr[0]" rather than the values of these variables.

jquery - assign variable inside a .html()

4 Answers4