Altering contents when loading iframes I am quite new to JavaScript and I wonder if you experts can see any obvious mistakes in this working code, and if any, suggest good improvements.

// add iframes to page
var normal_sortables = document.getElementById('normal-sortables');
normal_sortables.innerHTML = normal_sortables.innerHTML + '&lt;div class="postbox"&gt;&lt;iframe style="width:100%;height:300px;" id="iframe_upload" src="upload.php"&gt;&lt;/iframe&gt;&lt;iframe style="width:100%;height:300px;" id="iframe_images" src="images.php"&gt;&lt;/iframe&gt;&lt;iframe style="width:100%;height:300px;" id="iframe_pdf_documents" src="pdf.php"&gt;&lt;/iframe&gt;&lt;/div&gt;';



// declaring all variables
var code_to_be_inserted = '',
textarea_content = document.getElementById('content'),
iframe_upload = document.getElementById('iframe_upload'),
iframe_images = document.getElementById('iframe_images'),
iframe_pdf_documents = document.getElementById('iframe_pdf_documents');



// upload iframes of images and pdf documents when file is uploaded
iframe_upload.onload = function () {
iframe_images.src = 'images.php';
iframe_pdf_documents.src = 'pdf.php';
}



// add image to content editor
iframe_images.onload = function () {
    var images = iframe_images.contentWindow.document.getElementsByTagName('img');
    for (var i = 0; i &lt; images.length; i++) {
        images[i].onclick = function () {
            code_to_be_inserted = '&lt;img alt="" src="'+this.src+'" /&gt;\n\n';
            textarea_content.value = code_to_be_inserted + textarea_content.value;
        }
    }
}



// add pdf documents to content editor
iframe_pdf_documents.onload = function () {
    var pdf_documents = iframe_pdf_documents.contentWindow.document.getElementsByTagName('a');
    for (var i = 0; i &lt; pdf_documents.length; i++) {
        pdf_documents[i].onclick = function () {
            code_to_be_inserted = '\n\n&lt;a href="' + this.href+'" target="_blank"&gt;Click here to open ' + this.innerHTML + '&lt;/a&gt;';
            textarea_content.value = textarea_content.value + code_to_be_inserted;
            alert ('testar');
            return false;
        }
    }
}
If you wanted to retain any event handlers that were already attached to your elements, you could change the first piece of code like this an avoid one of the dangers of setting innerHTML on an element that already has a bunch of HTML in it:

// add iframes to page
var normal_sortables = document.getElementById('normal-sortables');
// create container div
var newDiv = document.createElement("div");
newDiv.className = "postbox";
// put content into container div
newDiv.innerHTML = '&lt;iframe style="width:100%;height:300px;" id="iframe_upload" src="upload.php"&gt;&lt;/iframe&gt;&lt;iframe style="width:100%;height:300px;" id="iframe_images" src="images.php"&gt;&lt;/iframe&gt;&lt;iframe style="width:100%;height:300px;" id="iframe_pdf_documents" src="pdf.php"&gt;&lt;/iframe&gt;';
// add container div to the sortables
normal_sortables.appendChild(newDiv);