Create an iframe in body using jquery

Question

I am facing a bit problem. I want to create an iframe inside the div tag which will be inside my body tag. I tried the following jQuery code:

$(document.createElement('<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>'));

But i didn't get any result. Also, i placed the script in the body tag but didn't get any result.

Thanks in advance.

Answer 1

Assuming you have jQuery added:

$(document).ready(function(){
    $('body').append('<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>');
});

This will add your code to the end of the body html...

Answer 2

createElement 's argument needs to be a string containing the name of an element type. You are providing a fragment of HTML.

Since you are using jQuery, just construct a jQuery object from that string.

jQuery('<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>');

Answer 3

document.createElement() doesn't support creating elements from HTML strings, but you can pass the string to jQuery to build out the content, ie:

var newContent = $('<div id="modalDiv"><iframe id="modalIFrame" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title"></iframe></div>');
newContent.appendTo("body");

Be sure to update the selector to whatever makes sense for you, here it's just being added to the body element.

Also, if the iframe is meant to actually point to a resource, be sure to set the src attribute as well.

Hope that helps! Cheers.