Insert Content into Iframe

Insert content into iFrame

You really don't need jQuery for that:

var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('Test');
doc.close();

jsFiddle Demo

If you absolutely have to use jQuery, you should use contents():

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append('Test');
});

jsFiddle Demo

Please don't forget that if you're using jQuery, you'll need to hook into the DOMReady function as follows:

$(function() {  
    var $iframe = $('#iframe');
    $iframe.ready(function() {
        $iframe.contents().find("body").append('Test');
    });
});

How to append html content into iframe?

this.iframe.nativeElement.contentWindow.frames.document.body.insertAdjacentHTML('beforebegin', contentToAppend);

this worked for me. I get the iframe element in Angular with ElementRef & @ViewChild then dig down to it's HTML body and append HTML content using insertAdjacentHTML method, in the position desired, available as beforebegin, afterbegin, beforeend and afterend.

How to set HTML content into an iframe

You could use:

document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");

Here's a jsFiddle, which works in all major browsers.

Note that instead of contentDocument.write you should use contentWindow.document.write: this makes it work in IE7 as well.

putting html inside an iframe (using javascript)

You can do it without jQuery also:

var iframe = document.getElementById('iframeID');
iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);

iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();

jQuery's html strips body, html and head tags from the inserted HTML.

Adding new elements to existing Iframe by JS

After your clarification in comments:

var ifr = gBrowser.selectedBrowser.contentDocument.getElementById('container')

Dont do that .contentWindow then get the document from that, its useless redundant etc.

Also dont do querySelector if you want to just get something by id anyways, huge speed difference, getElementById is much faster.

Also don't do .innerHTML the addon approvers won't accept it because it leads to security issues. Do .textContent.

Your fiddle will not work because:

You can't do cross frame communication
I'm not sure but I think: createElement is a "native" function in javascript so reserved in away although it is document.createElement but ya

This fiddle works, the rawr function is undefined in body, I'm not sure why so i moved the script to the document:

http://jsfiddle.net/TH48e/43/

<script>
function createElementMY(){
    var doc = document.getElementById('container');

    var ifrDoc = doc.contentDocument;

    var elem = ifrDoc.createElement("div");
    elem.textContent = 'Test';
    ifrDoc.body.appendChild(elem);
}
</script>
<iframe id="container" src="data:text/html,rawr"></iframe>
<button onclick="createElementMY()">Click me!</button>

Insert html content into iFrame before the iFrame page contents

there's also something like prepend

 parent.insertBefore(el, parent.firstChild);

it will prepend to the first child of your parent

OR use jQuery equivalent

$(parent).prepend(el)
So your code would look like this:

myFrame.prepend($('<div><h3>Hello, World</h3></div>'));

insert local javasscript into iframe html

I assume DataURIs cannot contain external scripts for security reasons but I cannot find the duplicate SO post that confirms this. Anyway, document.write the html and script into the frame. That works

$("#frame")[0].document.contentDocument.write(
        "<html><head>"+
        "<script src='jquery.min.js'><\/script>"+
        "<script src='testJSON.js'><\/script></head>"+ 
        "<body><p id='demo'></p>"+
        "<script src='name.js'><\/script>"+  
        "<h1>Test</h1>"+
        "</body></html>"
    );
$("#frame")[0].contentDocument.close();

you may need to fully qualify the URLs of the external files

Insert Content into Iframe