jqueryのappendを使用した際のhtmlタグに関数を挿入したい

Question

前提・実現したいこと

jqueryのappendを使用した際に、htmlタグ内に関数を使用したい

発生している問題・エラーメッセージ

正常に関数が読み込まれない

該当のソースコード

<div id="aaa" data-url="<!--$smarty.const.bbb-->"></div>

$smarty.const.bbbにはURLが挿入されている

  var $src = $("#aaa").attr("data-url");
  var $url=$src;
  $('#ccc').on('click', function () {
 $ddd.append('<iframe id="hoge" width="320" height="180" src="$url"　allowfullscreen></iframe>');
		});

試したこと

srcに$urlを挿入したが$urlと表示されてしまい、正常にURLが読み込めません。
jqueryを使用して、htmlを使用した際にはそのhtml内には関数は使用できないのでしょうか。

Answer 1

src="$url"　→　src="'+$url+'"

Answer 2

変数に$をつけるといろいろブレるのでjsのテストソース的にはお勧めできません
文字列の処理の問題ならたとえば

$ddd.append(`<iframe id="hoge" width="320" height="180" src="${$url}"　allowfullscreen></iframe>`);

もしくは

$ddd.append($('<iframe id="hoge" width="320" height="180" allowfullscreen></iframe>').attr('src',$url));

Comments

[hanahan]

ご回答ありがとうございます！${$url}にして、無事解決できました。

Answer 3

文字列の中に変数名を書いても、単なる文字列としてしか認識されません。

// その1 文字列の足し算
$ddd.append('<iframe id="hoge" width="320" height="180" src="' + $url + '"　allowfullscreen></iframe>');

// その2 テンプレートリテラル（IE11ではBabelでの変換が必要）
$ddd.append(`<iframe id="hoge" width="320" height="180" src="${$url}"　allowfullscreen></iframe>`);

// その3 属性をJavaScriptから指定する
$('<iframe />', { 
  id: 'hoge', width: 320, height: 180, src: $url, allowfullscreen: 'allowfullscreen' 
}).appendTo($ddd);

Comments

[hanahan]

ご回答ありがとうございます！${$url}にして、無事解決できました。