javascript - 检查 iframe 是否存在，然后使用 jquery 创建 HTML 标记

Question

我正在尝试使用 jquery 创建 HTML 标记：

<div class="icon"></div>

如果页面上存在 youtube 视频，则创建上述标记：

if ($('div.container iframe').length) {
  alert('frame exists');
  $('<div class="icon"></div>');
}

但是它不会创建标记。我希望用户粘贴一个 youtube 视频，然后我的 Jquery 应该自动为他们创建图标。请看我的实现：

var $video = $('div.container iframe');  //location of video
var $productImage = $('.product-image'); //location of main prod img
var $icon = $('.icon');                  //location of icon

//check if video exists
if ($('div.container iframe').length) {
    alert('frame exists');
  $('<div class="icon"></div>');

}

$('.product-image').append($video);      //append the video to the main prod img

$icon.on('click', function() {           //click
    $video.toggle();                     //toggle the video based on click
});

JSFIDDLE： http: //jsfiddle.net/t7qMF/7/ 解决方案：http: //jsfiddle.net/t7qMF/13/

Answer 1

首先检查 iframe 是否存在，如果存在则append图标 div -

if ($('div.container iframe').length > 0) {
    alert('frame exists');
    $('.container').append('<div class="icon">Icon</div>');
}

更新小提琴 - http://jsfiddle.net/t7qMF/11/

Answer 2

$('<div class="icon"></div>');创建标记，但不把它放在任何地方。将其附加到某些东西上，它应该可以工作。