iframeがjQueryを使用してdivに埋め込まれていません

Question

jQuery append()メソッドで奇妙な問題に直面しています。 div内にiframeを含むコンテナを追加したいのですが、どういうわけか動作しません。iframeを含むdivを追加するのではなく、これを他の通常のdivに置き換えると問題ありません。

のjQuery/JavaScriptコード -

var imageURL = 'https://www.youtube.com/embed/zZasH6qkn8M'; 
var setWidth = '90%'; 
var setHeight = '211px'; 
var iframeContainer = '<div id="iframecontainer" style="position: relative;left: 50%;border: 0;top: 50%;transform: translate(-50%, -50%)">'+'<iframe id="ytFrameId" class="ytClassa" width="' + setWidth + '" height="' + setHeight + '" src="' + imageURL +'></iframe>'+'</div>'; 

//var iframeContainer = '<div id="retro">This is retro</div>'; 
$('#test').append(iframeContainer); 

私は私のアプローチが間違ってやっているか知ってみましょう。

フィドル - https://jsfiddle.net/vo4cg8o3/

Answer 1

あなたはSRC

の属性を閉じることはありません

... src="' + imageURL +'></iframe>'+'</div>'; 
     ^
     open but not closed 

Answer 2

この単純なJavaScriptコードを試してみてください。代わりに.appendのあなたがsrc属性の最後に終了引用符が欠落している.html

$(document).ready(function() { 
    $("#test").html("<iframe src='http://jsfiddle.net'></iframe>"); 
}); 

Answer 3

を使用し、試してみてください。

var iframeContainer = '<div id="iframecontainer" style="position: relative;left: 50%;border: 0;top: 50%;transform: translate(-50%, -50%)">'+'<iframe id="ytFrameId" class="ytClassa" width="' + setWidth + '" height="' + setHeight + '" src="' + imageURL +'"></iframe>'+'</div>'; 

Here it is working