remove div content and add iframe

Question

In my application I want to remove div content and add iframe, here is my code

index.html

<div data-role="page">
    <div data-role="header" >
    <div data-role="content" id="contents">
        <a href="#" data-role="button" onclick="cif()"><img src="images/zo_connect.png"></a>
        </div>

    </div><!-- /content -->
</div><!-- /page -->

default.js function cif(){

$("#contents").remove();
$("#contents").html('<iframe src="http://google.com" style="height: 100%; width: 100%"></iframe>');

}

when i remove div contents and after that create iframe it doesn't show, I need that after clicking button remove the contents and after that in that contents create iframe

Answer 1

Well if you remove "contents", it's gone... You can't thereafter change its html(), since it's gone. You might want to skip the first line altogether.

Answer 2

$('#contents").remove() removes the whole <div id='contents'></div>

You're looking for $('#contents").empty() , which will remove everything inside the <div id='contents'>