javascript - checking if an iframe exists and then creating HTML markup using jquery - Stack Overflow

admin管理员组

文章数量:1292298

I am trying to create the HTML markup using jquery:

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

If the youtube video exists on the page then create the above markup:

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

However its not create the markup. I want the user to paste a youtube video then my Jquery should create the icon automatically for them. Please look at my implementation:

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: / SOLUTION: /

I am trying to create the HTML markup using jquery:

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

If the youtube video exists on the page then create the above markup:

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

However its not create the markup. I want the user to paste a youtube video then my Jquery should create the icon automatically for them. Please look at my implementation:

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/t7qMF/7/ SOLUTION: http://jsfiddle/t7qMF/13/

• javascript
• jquery

Share Improve this question Follow edited Jul 13, 2012 at 10:13 SOLDIER-OF-FORTUNE asked Jul 13, 2012 at 10:00 SOLDIER-OF-FORTUNESOLDIER-OF-FORTUNE 1,65455 gold badges3939 silver badges6868 bronze badges 1

• div.icon has its own css, so you should see an icon appear on the page. – SOLDIER-OF-FORTUNE Commented Jul 13, 2012 at 10:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

First check if iframe exists or not and if exists then append icon div -

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

Updated Fiddle - http://jsfiddle/t7qMF/11/

$('<div class="icon"></div>'); creates the markup but doesn't put it any where. Append that to something and it should work.

本文标签： javascriptchecking if an iframe exists and then creating HTML markup using jqueryStack Overflow