CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Aston
Aston

Reputation: 199

How to select a div in jquery and replace it with an iframe

I have jquery code which has been set up to select a 'div' called wrap.

What I want to do is change the selected 'div' to an 'iframe' with the the id news.

I have tried a few things and haven't managed to get it to work. Below is my code

$('document').ready(function () {
    var $wrap = $('#wrap'),
        page = 1;

    $('#next').on('click', function () {
        getPage(++page);
    });

    $('#prev').on('click', function () {
        getPage(--page);
    });

    var getPage = function (page) {
        $wrap.load('proxy.php?page=' + page + ' #postsArea');
    };

    getPage(page);

});

Below is the generated HTML

<body>
<div id="wrap">
</div>
<button type="button" id="next">Next</button>
<button type="button" id="prev">Previous</button>
</body>

Below is what I want to change it to

<body>
<iframe id="news">
</iframe>
<button type="button" id="next">Next</button>
<button type="button" id="prev">Previous</button>
</body>

Upvotes: 0

Views: 124

Answers (6)

Popnoodles
Popnoodles

Reputation: 28409

"what I want to do is change the selected 'div' to an 'iframe' with the the id news."

This is how to do that, and give it the URL you want within the function you wrote.

var getPage = function (page) {
    $("#news").replaceWith($('<iframe>', {
        src:'proxy.php?page=' + page + ' #postsArea',
        id:'news'
    }));
};

http://jsfiddle.net/2qSAD/

Though as someone mentioned, it would be better to use an iframe in the first place. If you want to hide it until you need it (which could be why you're using a div) you can do that.

<iframe id="news" style="display:none;"></iframe>

JQ

var getPage = function (page) {
    $("#news").prop('src', 'proxy.php?page=' + page + ' #postsArea').show();
};

Upvotes: 2

Zword
Zword

Reputation: 6793

Try using outerHTML:

document.getElementById("wrap").outerHTML="<iframe id='news'></iframe>";

Below is the fiddle:

http://jsfiddle.net/uZsmq/

Upvotes: 1

Simon Davies
Simon Davies

Reputation: 3686

could you not use the JQ query replaceWith..

  $( "div#wrap" ).replaceWith('<iframe id="news" src=".."></iframe);

Upvotes: 1

dkellner
dkellner

Reputation: 9926

If you want to replace a complete element, I'd suggest to aim its parent:

$("#mydiv").parent().html("<iframe>....</iframe>");

html() returns the INNER html of an element. So the parent's inner is the element itself.

Upvotes: 1

Sridhar R
Sridhar R

Reputation: 20418

Use src attribute to change iframe source

$('#news').attr('src', "proxy.php?page="+page+"#postsArea")

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Try this:

document.getElementById('news').src = "proxy.php?page="+page+"#postsArea";

Upvotes: 2

Related Questions