How to select div inside iframe?

Question

I am trying to take the contents of a div inside an iframe, remove the iframe and display only the div. I cannot understand why this will not work - I am not sure whether to use contentWindow or contentDocument. Any pointers? Thank!

I have one div with id "iframe" inside which iframe with id "embedded_article",

<script type="text/javascript">

function getContentFromIframe()

{    
var parent = document.getElementById('iframe');
var child = document.getElementById('embedded_article');

var oldContent = child.contentWindow.document.innerHTML;

var newContent = child.contentWindow.document.getElementById('ec-article').innerHTML;

  document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));


parent.innerHTML = newContent;    

}
</script>

Answer 1

Your example:

document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));

It should look something like this:

var element = frames['iframe'].document.getElementById('embedded_article');

element.parentNode.removeChild(element);

window.frames['yourFrameId']evaluates the object windowassociated with your frame. when you use document.getElementById, you want to use documentthat belongs to your frame window, and not documentin the main window. The rest should be self-evident.

Answer 2

to get into the div inside the iFrame you can try something like this

     var div = document.getElementById("YourIFrameID").contentWindow.document.body.getElementById("YOUR_DIV_ID")