在javascript中使用add方法更新数组

我有一个静态数组，可以循环显示三列

男孩，女孩和所有人

到目前为止，我添加了一个循环方法，该方法显示数组中的所有元素：

  boys.forEach(function(boy) {
  strboy += '<li>'+ boy + '</li>';
  }); 

 strboy += '</ul>';
 document.getElementById("boys").innerHTML = strboy;

---

这是可行的，新数组被记录到控制台，但是在用户添加新元素之后，我如何更新UI呢。我尝试不使用匿名函数，但随后整个新数组再次显示，我只希望显示新数组。我更喜欢只使用普通JavaScript而不使用JQuery

将代码放入函数中，每次添加一个新成员时，只需调用它即可

boys=['Mario'，'Pepe']
函数updateUi（）{
strboy=“
”；
boys.forEach（函数（boy）{
strboy+='
'+boy+'
'；
});
strboy+='
'；
document.getElementById（“boys”）.innerHTML=strboy；
}
函数addboy（）{
var boy='Jhon Doe'
男孩。推（男孩）；
updateUi（）
}
updateUi（）

添加男孩

您不必全部重画。只需添加一个元素！因此，没有jQuery，您可以编写（如果'boys'是ulid）

函数addBoy（boy）{
让currentBoys=document.getElementById（“boys”）.innerHTML；
document.getElementById（“boys”）.innerHTML=currentBoys+'
'+boy+'
'；
}

使用ES6

/**
*使用给定的男孩初始化男孩列表
*/
函数init（initialBoys）{
const str=initialBoys.reduce（（tmp，x）=>`${tmp}
${x}
`，）；
document.getElementById（'boys'）.innerHTML=str；
}
/**
*生成一个介于0和max之间的随机数
*/
函数getRandomInt（最大值）{
返回Math.floor（Math.random（）*Math.floor（max））；
}
/**
*在列表中添加新男孩，从预定义列表中拾取男孩
*随便捡起来
*/
函数addRandomNewBoy（）{
常数可用项=[
“基督徒”，
“阿米尔”，
“朱利安”，
“Rorelio”，
“胡安”，
“格里戈里”，
“圣诞老人”，
“小老鼠”，
“你妈妈”，
];
addBoy（availableBoys[getRandomInt（availableBoys.length-1）]；
}
/**
*在名单上加一个男孩
*/
函数addBoy（boy）{
让str=document.getElementById（'boys'）.innerHTML；
str=`${str}
${boy}
`；
document.getElementById（'boys'）.innerHTML=str；
}
/**
*启动男孩列表的初始化
*/
初始化([
“大卫”，
“艾略特”，
]);


添加一个好的boi
将您的第一个代码包装到一个函数中，然后再次运行该函数以更新UI。您是否在寻找可观察的对象？问题是，整个数组将再次显示，而不仅仅是新数组。即使我在window.onload（）上调用该函数。@baileyaldwin此方法也能帮助您：
Element.insertAdjacentHTML（）
perfect在需要的地方附加一段HTML。
function addboy(){
var boy=document.getElementById('newboy').value
  boys.push(boy);
  console.log(boys);
}

function addBoy(boy){
    let currentBoys = document.getElementById("boys").innerHTML;
    document.getElementById("boys").innerHTML = currentBoys + '<li>' + boy + '</li>';
}