Trying to write to iframe on keyup

Question

I am trying to write to my iframe on keyup but it does not update. I will run through the code I am using to try to achieve this.

First, I am grabbing the original HTML that I would like on the iframe (through AJAX) and writing that to the iframe as so:

var base_tpl = base_html; //get base template html.
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(base_tpl);
iframe_doc.close();

After that I am attaching document.querySelector to the relevant text areas that will serve as inputs for the changes that I want to show up on the corresponding elements within the iframe. Here is how I am doing that:

var the_title = document.querySelector('#the_title2 textarea'),
    the_subheading = document.querySelector('#the_subheading2 textarea'),
    the_image_url = document.querySelector('#the_image_url2 textarea'),
    the_description = document.querySelector('#the_description2 textarea'),
    the_signup_button_text = document.querySelector('#the_signup_button_text2 textarea'),
    the_email_capture_text = document.querySelector('#the_email_capture_text2 textarea'),
    the_email_capture_button_text = document.querySelector('#the_email_capture_button_text2 textarea');
the_css = document.querySelector('#the_css2 textarea');
var editors = [the_title, the_subheading, the_image_url, the_description, the_signup_button_text, the_email_capture_text, the_email_capture_button_text];

I then attach these to on keyup listeners as such:

// Attaching the onkeyup Event
editors.forEach(function(editor, i, arr) {

    editor.addEventListener('keyup', function() {

        // The function that'll prepare the code and inject
        // into the iframe.
        //alert(the_title.value);

        render();

    }, false);

});

Notice the render function, it works like this:

var render = function() {
    var source = prepareSource();

    var iframe = document.querySelector('#output iframe'),
        iframe_doc = iframe.contentDocument;
    console.log(source);
    iframe_doc.open();
    iframe_doc.write(source);
    iframe_doc.close();
};

Prepared source is the function that puts together the newly inputted elements. The methodology behind it can be seen here:

var prepareSource = function() {
    var title = the_title.value,
        subheading = the_subheading.value,
        image_url = the_image_url.value,
        description = the_subheading.value,
        signup_button_text = the_image_url.value,
        email_capture_text = the_subheading.value,
        email_capture_button_text = the_image_url.value,
        css = the_css.value,
        src = '';

    src = base_tpl;
    // Title
    src = src.replace("<div id='the_title'><h3><?php echo $page->title; ?></h3></div>", "<div id='the_title'><h3>" + title + "</h3></div>");
    // Subheading
    src = src.replace("<div id='the_subheading'><h3><?php echo $page->subheading; ?></h3></div>", "<div id='the_subheading'><h3>" + subheading + "</h3></div>");
    // Image URL
    src = src.replace("<div id='the_image_url'><h3>", image_url + "</h3></div>");
    // Description
    src = src.replace("<div id='the_description'><h3>", description + "</h3></div>");
    // Signup Button Text
    src = src.replace("<div id='the_signup_button_text'><h3>", signup_button_text + "</h3></div>");
    // Email Capture Text
    src = src.replace("<div id='the_email_capture_text'><h3>", email_capture_text + "</h3></div>");
    // Email Capture Button Text
    src = src.replace("<div id='the_email_capture_button_text'><h3>", email_capture_button_text + "</h3></div>");

    // CSS
    css = '<style>' + css + '</style>';
    src = src.replace('</head>', css + '</head>');

    return src;
};

My question is of whether i am doing something wrong here. The main issue is that the prepared source does not seem to be working at all. Nothing changes on the iframe on keyup. I have tested this with console.log. It does not seem to be affected at all.

I would appreciate any help here.

Cheers!

Tapha.

EDIT: Please ignore the elements after subheading in the 'prepared source' section - i have only done the title and subheading portions for testing purposes.