javascript - 如何让 "createElement"不重复，而是用新信息替换旧信息？

Question

如何让我的“createElement”用新信息替换旧信息，而不是像现在这样一直添加更多文本。或者，如果不可能，则仅将 appentChild 添加到 1 行。

需要更改的代码部分:

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}

请记住，createElement 也必须与其上面的 javascript 一起使用。它不是一个独立的功能。整个代码源是:

function showFileSize() {
    var input, file;

    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileToLoad');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}

Answer 1

创建单个元素。因为您只想要一个段落。

function showFileSize() {
    var input, file;

    if (!window.FileReader) {
        bodyAppend("id", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileToLoad');
    if (!input) {
        bodyAppend("id", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("id", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("id", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("id", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(id, innerHTML) {
    var elm;

    elm = document.getElementbyId(id);
    elm.innerHTML = innerHTML;
}