动态更新/'；刷新'；javascript函数

我对JavaScript非常陌生，遇到了一个可能显示我天真的问题：（这里是一个简化版本：

我有一个数组和一个函数，可以为每个数组元素自动创建一个新的

，以在页面上显示其内容。我还有一个按钮，可以调用一个函数向数组中添加新元素。我原以为初始函数会在数组更改时识别，并为新元素动态创建一个新的当然不是。我怎样才能做到呢

我知道我可以设置当按钮点击添加一个包含新元素本身的新时执行的函数，但这似乎不雅观，也可能会给我带来问题。我想要的似乎是对初始函数的某种“刷新”。任何建议都非常感谢：）非常感谢

下面是代码（JS fiddle链接如下）：

常量数组=['a'，'b'，'c'，'d']； 函数填充（）{ 让我； 对于（i=0；i

---

如果您想在添加子项之前清除容器，您可以再次调用

populate（）

。您所描述的问题已由Angular、Vue和React等流行web框架解决。如果你想在添加孩子之前清除容器，你可以再次调用<代码>人口（）/代码>……你所描述的问题已经被流行的Web框架（如角度、VUE和反应）解决了。你可能想考虑一下这些问题。

const array = ['a', 'b', 'c', 'd'];
function populate() {
    let i;
    for (i = 0; i < array.length; i++) {
        let para = document.createElement('p');
        para.innerText = array[i];
        let container = document.getElementById('container');
        container.appendChild(para);    
    }
}
populate();


document.getElementById('button').addEventListener("click", function addToAray() { 
    array.push('e')
    console.log(array);
});