javascript - 使用 javascript 添加 html 元素会使其他 js 变得不稳定

Question

我有以下javascript代码，该代码是根据SWFUpload中的SimpleUpload演示修改的。它用于生成临时上传进度条。它工作正常，除非我添加已注释掉的代码。基本上，这一行会破坏演示文稿:

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

演示:尝试上传。上传功能不起作用。
http://www.mgxvideo.com/mgxcopy-dev/uploader-works/upload_files.php
http://www.mgxvideo.com/mgxcopy-dev/uploader-broken/upload_files.php

代码是:
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

下面的效果更好吗？

this.fileProgressElement.innerHTML="Upload Status";