使用Javascript发布刷新div

我试图编写一些代码，在单击按钮时，将填充一个div，如下面的代码所示。问题是，我想确保如果多次单击按钮，可以说div会重新加载。我试着用下面的refreshDiv函数来实现这一点，但其中包括了单击按钮的操作

 function buttonClickHandler() {

    var divString = "foodJournal";
    refreshDiv(divString);

    var divID = document.getElementById("foodJournal");
    var fieldset = document.createElement("fieldset");
    var legend = document.createElement("legend");
    legend.innerHTML = "Food Log";
    legend.setAttribute('id', "legend");
    divID.appendChild(fieldset);
    fieldset.appendChild(legend);

     //refreshes food journal div
     var refreshDiv = function(element) {
         node = document.getElementById(element);
         while (node.hasChildNodes()) {
             node.removeChild(node.lastChild);
         }
     };
 }

感谢您的帮助

在实际声明变量之前，您正在调用refreshDiv。将变量声明移到对它的调用上方，它应该会工作

function buttonClickHandler() {

    var divString = "foodJournal";
    //refreshes food journal div
    var refreshDiv = function(element) {
        node = document.getElementById(element);
        while (node.hasChildNodes()) {
            node.removeChild(node.lastChild);
        }
    };

    refreshDiv(divString);

    var divID = document.getElementById("foodJournal");
    var fieldset = document.createElement("fieldset");
    var legend = document.createElement("legend");
    legend.innerHTML = "Food Log";
    legend.setAttribute('id', "legend");
    divID.appendChild(fieldset);
    fieldset.appendChild(legend);     
}

---

编写的代码将导致控制台中出现错误。在Chrome上，您会看到：

未捕获类型错误：未定义不是函数

指向第一个refreshDivdivString语句

在javascript中提升变量时，只提升声明，而不提升赋值

一个简单的修复方法是将变量声明及其赋值移到对refreshDiv的第一次调用之上

---

在您的示例中，没有理由有一个单独的方法来清除div。如果这不仅仅是为了说明您所遇到的问题，那么您可以考虑重构代码以减少一些冗余并删除不必要的函数调用。它是否达到了refreshDiv方法？请您创建一个包含html和js的javascript库。如果您的项目可行，我还建议使用类似jQuery的javascript库。所有这些都可以用几句话来代替。别听这些家伙的。jQuery很讨厌此外，您也可以只执行.id=legend；。

function buttonClickHandler() {
    var divString = "foodJournal";

     //refreshes food journal div
     var refreshDiv = function(element) {
         node = document.getElementById(element);
         while (node.hasChildNodes()) {
             node.removeChild(node.lastChild);
         }
     };

    refreshDiv(divString);

    var divID = document.getElementById("foodJournal");
    var fieldset = document.createElement("fieldset");
    var legend = document.createElement("legend");
    legend.innerHTML = "Food Log";
    legend.setAttribute('id', "legend");
    divID.appendChild(fieldset);
    fieldset.appendChild(legend);

 }