如何使用普通Javascript函数呈现多个HTML部分

这是一个有数百个页面的静态网站。我需要呈现一些元素，比如topnav、时事通讯或一条内容带，并定期从JS更改这些内容

这就是我所尝试的：

const components = {
  compartirEnFlex: `<h4>Newsletter</h4>`,
  newsletterEs: `<h4>Compartir</h4>`,
}


const ids = ['newsletterEs', 'compartirEnFlex', 'infoArticulo', 'infoDeLaWebEnFlexIzq']

function renderComponents(objWithComp, idsArr){
  return idsArr.map(function(id){
    for(let component in objWithComp){
      let arrOfIds = Object.keys(objWithComp);
      arrOfIds.map(key => key)
      if(id === key){
        document.getElementById(id).insertAdjacentHTML('afterbegin', objWithComp[id])
      }
    }    
  })
}
renderComponents(components, ids);

常数分量={
compartirEnFlex:‘时事通讯’，
时事通讯：`Compartir`，
}
const id=['newslettes'，'compartirEnFlex'，'infoArticulo'，'infoDeLaWebEnFlexIzq']
功能渲染组件（objWithComp、IDSAR）{
返回idsArr.map（函数（id）{
用于（让组件在objWithComp中）{
设arrOfIds=Object.keys（objWithComp）；
arrOfIds.map（key=>key）
if（id==键）{
document.getElementById（id）.insertAdjacentHTML（'afterbegin'，objWithComp[id]）
}
}    
})
}
渲染组件（组件、ID）；

每个id在HTML结构中都有对应的id。当我单独做这件事时，它会起作用。然而，我必须以一种优雅的方式处理这个问题（在这个项目中，像React这样的JS框架是不可能的）

---

谢谢你的帮助

运行代码时，您将在控制台中看到错误

uncaughtreferenceerror:key未定义

这是因为
if（id==key）
中的
key
没有定义。行
arrOfIds.map（key=>key）
返回与
arrOfIds
相同的精确数组，因为“返回一个新数组，其中填充了对调用数组中的每个元素调用提供函数的结果。”

在这里，您不会将新数组分配给变量，因此不会发生任何事情。即使是这样，新数组也将是
arrOfIds
的副本，因为映射函数
（key）=>key
为每个
键返回
key
——这意味着输出与输入相同


然而，这不是一个问题。如果我正确理解了你的问题，那么我应该举一个例子来说明你正在努力实现的目标。如果这就是您想要实现的目标，那么这里有一个解决方案：

首先，您不需要在
objWithComponent
内部
idArr
中迭代
component
——您已经在
idArr
中这样做了。您也不需要
ids
数组，因为您可以使用从
components
对象获取组件的键

假设您的HTML如下所示：



然后，使用获取您拥有的组件的ID数组，您可以将这些ID映射到HTML标记。实际上，
map
在这里是不必要的，因为
map
返回一个新数组，除非以后需要该数组，否则没有理由使用
map
。相反，您可以使用

下面是它的样子：

const组件={
compartirEnFlex:‘时事通讯’，
时事通讯：`Compartir`，
}
功能渲染组件（objWithComp）{
对象
.钥匙（部件）
.forEach（（id）=>{
常量元素=document.getElementById（id）
const component=objWithComp[id]
if（组件和元素）{
element.insertAdjacentHTML（'afterbegin'，component）
}
})
}
渲染组件（组件）

然后，当调用
renderComponents
时，您可以只传递
components
参数，并且只使用
if
语句呈现具有相应ID的div的组件。
arrOfIds.map（key=>key）
的目的是什么？在
arrOfIds
中解压数组键，所以我在if条件下比较了两个字符串。你检查控制台了吗？出现错误。要使用控制台，必须将函数放入HTML页面中的脚本中，因为它使用的是“document”对象。可以使用来创建原型。