title: How to get innerHTML content of iframe element
body: <p>hi i am trying to get inner HTML of iframe element</p>
  
  <p>my html document a structure is like this</p>
  
  <pre><code>&lt;body&gt;
      &lt;div&gt;
          &lt;iframe id="frame1"&gt;
              &lt;html&gt;
                  &lt;button id="mybutton"&gt;click me&lt;/button&gt;
              &lt;/html&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>i am creating a chrome extension i have to show an alert when button with id mybutton is clicked i write an a content script</p>
  
  <pre><code>var greeting = "hola, ";
  
  document.body.innerHTML='&lt;div&gt;&lt;iframe id="frame1" src="http://onemoredemo.appspot.com/"&gt;&lt;/iframe&gt;&lt;/div&gt;' ;
  
  var iframe = document.getElementById("frame1");
  var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
  
  var button = iframeDocument.getElementById("mybutton") ;
  
  if(button ==null)
  alert("button is null") ;
  </code></pre>
  
  <p>i installed this extension in chrome when i visit a page then document body is changed into an iframe with a button in it.
  but i am facing an alert which has button is null but there is button in iframe why i am  getting null for this button??</p>