Question

How to create iframe tag in jQuery and set it as only content of some div?

If target div has some content, replace it and put dynamically created iframe tag.

Here is what I have tried:

        $(".someClass").click(function(){

             var $iframe = $('<iframe allowfullscreen  ></iframe>', {
                'width': 650,
                'height': 580,              
                'src': someUrl
             });
             $('#someId').html($iframe);

        });

This code actually adds iframe to the div but the iframe is missing src atribute.
What can be wrong with this code?

Thanks.

Answer 1

This is working for me:

$('<iframe />', {
    name: 'myFrame',
    id:   'myFrame',
    src: 'http://www.google.com/'
}).appendTo('div');

ONLINE DEMO (doesn’t load google because of some restrictions on jsfiddle (I guess) but you can see that there’s src attribute on the iframe)

Hope it helps!

Edit

var myFrame = $('<iframe />', { name: 'myFrame', id:   'myFrame', src: 'http://www.google.com/' });
$('div').html(myFrame);

ONLINE DEMO USING HTML()