current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have this html on my document 

<iframe width="100%" height="166" scrolling="no" frameborder="no" src="">
<html><head></head><body></body></html>
</iframe>

And i need to replace with another custom html code I want for example with this:

<div class="customdiv">any content I want</div>

any idea? the problem is that i cant target the element iframe because in the same page I can have many iframe but with different code, I only need to target the ones that have the specific code from up thanks in advance

share|improve this question
add comment

3 Answers

up vote 1 down vote 
$('iframe').html( $('.customdiv').html() );

use .html method to get or set the innerhtml for a element.

share|improve this answer
    
the problem is, that i can have many iframe on the same page, so i only need to replace only the ones that have this: <iframe width="100%" height="166" scrolling="no" frameborder="no" src=""> <html><head></head><body></body></html> </iframe> not all the iframes –  canute Jun 16 '13 at 22:25
    
@canute the HTML property can be read, too, so loop over the iframes using jQuery's each and replace those. –  Jonathan Hobbs Jun 16 '13 at 22:27
add comment
up vote 0 down vote

This will replace the contents of the customdiv element using JQuery html method.

$('.customdiv').html('your html string');
share|improve this answer
add comment
up vote 0 down vote

You would want to use the replaceWidth function and not the html function the other posts are suggesting, as this will recreate entirely new elements. In it's most simple form it's as follows:

$('div.second').replaceWith('<h2>New heading</h2>');

But you can also pass an element reference or jquery object to it.

$('iframe').replaceWith($(".customdiv"));

In general though this is not advisable and rather you should add or show/hide the element and remove the other element by hand (.remove()).

You point out in your comment that you wish only to match empty iframes. This is going to be far harder to do, as I fear that your iframe is going to be on another domain (that's normally the case with iframes) so you can't access anything that's inside the iframe tag to put it that way. If on the other hand the iframe is on your own domain you should reconsider the use of iframes, though in that case you can use the contains jquery function checking for the existance of a node that's not present in the empty documents (or find the body element and check it's empty)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.