Appending Iframe to Particular Place in HTML Using Jquery

Question

Hi all, I'm trying to place the following DOM generated iframe into a certain part of the page. In particular I want it to sit inside a div I have name "maps". Right now it's floating all the way to the bottom of the page probably because it's being placed there. Is there a way to find the div called maps and place it right after that div tag?

Any help would be appreciated! Here is the code:

        function handle_geolocation_query(position) {


        var image_url = "http://maps.google.com/?ie=UTF8&q=@" + position.coords.latitude + ',' + position.coords.longitude + 
                        "&z=16&output=embed";

        jQuery("#map").remove();
        $(document.body).append(
          jQuery(document.createElement("iframe")).attr("src", image_url).attr('width','320').attr('height','320').attr('id','map')
        );

    }

Answer 1

$('#maps')
    .after('<iframe src="'+image_url+'" width="320" height="320" id="map"');

Would find the div with the id of maps and append the iframe after that element. I'm not sure if you really want it after the div or inside of the div though (seems to me like it should be inside).

Answer 2

I tried that out and the iframe no longer shows up. For some reason whenever I modify the $(document.body).append statement the map won't appear. Maybe I implemented your code wrong? Check out the 2 different ways I tried below:

function handle_geolocation_query(position) {


            var image_url = "http://maps.google.com/?ie=UTF8&q=@" + position.coords.latitude + ',' + position.coords.longitude + 
                            "&z=16&output=embed";

            jQuery("#map").remove();
            $('#maps')
    .after('<iframe src="'+image_url+'" width="320" height="320" id="map"');
}

and this one:

        function handle_geolocation_query(position) {


            var image_url = "http://maps.google.com/?ie=UTF8&q=@" + position.coords.latitude + ',' + position.coords.longitude + 
                            "&z=16&output=embed";

            jQuery("#map").remove();
                $('#maps')
                .after(document.createElement("iframe")).attr("src", image_url).attr('id','map')
        );
}