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属性末尾的结束语，请尝试：

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

Answer 2

您永远不会关闭src的属性

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

Answer 3

试试这个简单的javascript代码。而不是.append使用.html

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

iframe没有使用jQuery嵌入div中

3 个答案: