Почему ваш код не работает должным образом:
$("#test").html("<iframe id='i' src='arr[0]'></iframe>");
генерирует вывод html:
<div id="test">
<iframe id='i' src='arr[0]'></iframe>
</div>
Ваши переменные фактически выводятся как литералы, поскольку вы не используете экранирование / конкатенацию (см. эту статью для строки JS 101).
Что вы можете сделать, чтобы это заработало:
Хотя другие ответы верны, последовательное использование одинарных кавычек для строк делает конкатенацию HTML более увлекательной (поскольку значения атрибутов обычно должны быть в двойных кавычках):
i++;
$("#test").html('<iframe id="' + i + '" src="' + arr[0] + '"></iframe>');
Что вы можете сделать, чтобы сделать его еще более беспроблемным для вас:
Это может быть излишним, если вам нужно объединить только один раз. В долгосрочной перспективе, однако, этот подход @ Zippoxer делает вашу жизнь намного проще, когда вам нужно вставить значения в строки:
String.prototype.format = function() {
var formatted = this;
for(arg in arguments) {
formatted = formatted.replace("{" + arg + "}", arguments[arg]);
}
return formatted;
};
Использование в вашем случае:
$("#test").html('<iframe id="{0}" src="{1}"></iframe>'.format(i, arr[0]));