我对JavaScript还是很陌生，并且遇到了一个问题，该问题可能显示出我的天真:(这是一个简化的版本：
我有一个数组和一个函数，该函数自动为每个数组元素创建一个新的<p>以便在页面上显示其内容。我还有一个按钮，它调用一个函数来向数组添加新元素。我曾期望初始函数能够识别数组何时发生更改，并为新元素动态创建新的
。当然，事实并非如此。我如何做到这一点？
我知道我可以设置单击按钮时添加新元素的新功能
，但这似乎很不雅致，并且可能还会导致我遇到问题。似乎我正在寻找的是某种“刷新”初始功能。任何建议都非常感激:)预先非常感谢！
这是代码（下面也链接了JS小提琴）：
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);
});