Adding an html element using javascript makes other js wonky

Question

Dear all:

I have the following javascript code, which is modified from the SimpleUpload demo in SWFUpload. It's used to generate a temporary upload progress bar. It works fine, unless I add in the code which has been commented out. Basically, this line will break the presentation:

this.fileProgressElement.appendChild(document.createTextNode("Upload Status"));

Demos: Try out the upload. The upload functionality does not work.
http://www.mgxvideo.com/mgxcopy-dev/uploader-works/upload_files.php
http://www.mgxvideo.com/mgxcopy-dev/uploader-broken/upload_files.php

The code is:
http://www.mgxvideo.com/mgxcopy-dev/uploader-works/js/sample1.txt
http://www.mgxvideo.com/mgxcopy-dev/uploader-broken/js/sample1.txt

function FileProgress(file, targetID) {
    this.fileProgressID = file.id;

    this.opacity = 100;
    this.height = 0;


    this.fileProgressWrapper = document.getElementById(this.fileProgressID);
    if (!this.fileProgressWrapper) {
     this.fileProgressWrapper = document.createElement("div");
     this.fileProgressWrapper.className = "progressWrapper";
     this.fileProgressWrapper.id = this.fileProgressID;

     this.fileProgressElement = document.createElement("div");
     this.fileProgressElement.className = "progressContainer";
     //this.fileProgressElement.appendChild(document.createTextNode("Upload Status"));

     var progressCancel = document.createElement("a");
     progressCancel.className = "progressCancel";
     progressCancel.href = "#";
     progressCancel.style.visibility = "hidden";
     progressCancel.appendChild(document.createTextNode(" "));

     var progressText = document.createElement("div");
     progressText.className = "progressName";
     progressText.appendChild(document.createTextNode(file.name));

     var progressBar = document.createElement("div");
     progressBar.className = "progressBarInProgress";

     var progressStatus = document.createElement("div");
     progressStatus.className = "progressBarStatus";
     progressStatus.innerHTML = " ";

     var progressFull = document.createElement("div");
     progressFull.className = "progressBarFull";
     progressFull.innerHTML = " ";

     this.fileProgressElement.appendChild(progressCancel);
     this.fileProgressElement.appendChild(progressText);
     this.fileProgressElement.appendChild(progressStatus);
     this.fileProgressElement.appendChild(progressBar);
     this.fileProgressElement.appendChild(progressFull);
     this.fileProgressWrapper.appendChild(this.fileProgressElement);

     document.getElementById(targetID).appendChild(this.fileProgressWrapper);
    } else {
     this.fileProgressElement = this.fileProgressWrapper.firstChild;
     this.reset();
    }

    this.height = this.fileProgressWrapper.offsetHeight;
    this.setTimer(null);


}

Answer 1

Does the following work any better?

this.fileProgressElement.innerHTML="Upload Status";