title: Cannot programmatically populate an iframe with Javascript
body: <p>I want to dynamically populate an iframe with Javascript.</p>
  
  <p>I do not want the iframe in a html document loaded in via src.</p>
  
  <p>I do not want to use Jquery, just plain old javascript (ECMA 5.1).</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>var elementToAttachTo = document.getElementById(attachTo);
  
  // Need to create and attach iframe to page before populating.
  // attachTo is provided as a parameter to this function, this definitely
  // works as I got this working setting the iframe src to a html file..
  
  var ifrm = document.createElement("iframe");
  ifrm.setAttribute("id", "blabla");
  // I set src to about:blank here, cause I read to do that somewhere...
  ifrm.setAttribute("src", "about:blank");
  
  // I attach the iframe BEFORE populating it.
  elementToAttachTo.appendChild(ifrm);
  
  ifrm = populateIframe(ifrm);
  </code></pre>
  
  <p>Here is my populateIframe function:</p>
  
  <pre><code>function populateIframe(iframe) {
      var ifrmHtml = iframe.contentDocument.documentElement;
  
      var p = document.createElement("p");
      p.innerHTML = "Hello iframe!";
      ifrmHtml.appendChild(p);
  
      iframe.contentDocument.documentElement = ifrmHtml;
      return iframe;
  }
  </code></pre>
  
  <p>I was trying to call appendChild() directly to the iframe which didn't work, so I did some research and found examples of appending to the contentDocument.documentElement. It still doesn't work.</p>
  
  <p>Many thanks for any help!</p>