title: Adding new elements to existing Iframe by JS
body: <p>I'm trying to add some html elements inside a iframe, to personalize a site. I'm building a browser extension, so there is no cross-domain problem. I have the iframe:</p>
  
  <pre><code>&lt;iframe id="container" src="http://www.google.com"&gt;
      &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
  &lt;/iframe&gt;
  </code></pre>
  
  <p>and then, when the document is already loaded, I create the element and insert it... But it is never shown in the iframe. But I am allowed to get an iframe-existent element and to change it's properties. So, I have access to the elements but not for create new ones? Why?</p>
  
  <pre><code>var ifr = document.querySelector("#container");
  var ifrDoc = ifr.contentWindow || ifr.contentDocument;
      if (ifrDoc.document) ifrDoc = ifrDoc.document;
  
  var elem = ifrDoc.createElement("div");
      elem.innerHTML = "Demo Box";
      elem.style.width = "50px";
      elem.style.height = "50px";
      elem.style.position = "absolute";
      elem.style.background = "red";
  
  ifrDoc.body.appendChild(elem);
  </code></pre>
  
  <p>Here a JSFiddle demo to understand the problem (remember extensions have another privileges): <a href="http://jsfiddle.net/TH48e/40/" rel="nofollow">http://jsfiddle.net/TH48e/40/</a></p>
  
  <p>Any idea?</p>