Javascript 如何创建<；ul>；每个员额的要素 [ { 标题：“职务名称” 作者：“某个家伙” }, { 标题：“职务名称”， 作者：“某个家伙” } ]

当用户搜索一篇文章时，它可能会返回类似上面的内容。我如何使用VanillaJS或jQuery使它返回一个带有

标记的页面，其中包含标题和作者的数据标记？我知道这是一个大问题，但我不需要确切的答案，只需要知道该怎么做！我也试过foreach，但没办法解决

谢谢，

---

Jude Wilson不太确定“返回页面”是什么意思，但您可以

映射数据，并使用
innerHTML将其设置为
ul


函数打印数据（元素，数据）{
ele.innerHTML=data.map（item=>`
${item.title}-${item.author}
`）.join（“”）
}
const ulEle=document.querySelector（“#target”）
常数数据=[
{标题：“文章标题”，作者：“某个家伙”}，
{标题：“文章标题”，作者：“某个家伙”}
]
打印数据（ulEle，数据）
据我所知，您正在尝试创建一个
标记，该标记有多个子
标记，每个标记包含过滤后的数据
标题
，以及
作者
键

通常，我建议使用vue.js之类的工具来管理UI的数据绑定，但由于您提到希望使用jQuery或vanilla js来实现这一点，这比您想象的要简单得多

下面是使用jQuery的完整HTML代码示例：







$（函数（）{
常数
$container=$（“#postsContainer”），
//获取“标记”模板的HTML内容
template=$（'#postTemplate'）.html（），
//在这里，您可以获取/返回API或过滤后的数据
//注意：我修改了数据以展示示例。
getData=（）=>{
返回[
{
标题：“职位名称#1”，
作者：“某个家伙”，
标签：['foo'，'bar'，'baz']，
},
{
标题：“职位名称#2”，
作者：“其他人”，
标签：[“西瓜”、“苹果”、“香蕉”]，
}
];
},
//在这里，您可以调用此函数来更新UI
//基于“getData（）返回的数据”
updateSearchTags=（）=>{
const postsArray=getData（）；
//在向容器添加任何新元素之前，我们应该先清空它。
$container.empty（）；
邮递员（邮递员）{
常数
{title，author，tags}=post，
$postEl=$（模板）；
//使用post数据创建模板
$postEl.find（“.post title”）.text（title）；
$postEl.find（'.post-author'）.text（author）；
$postEl.find（'.post-tags'）.text（tags.join（'，'））；
//将post元素添加到列表中
$postEl.appendTo（$container）；
}
};
//必要时调用UI Update函数
updateSearchTags（）；
});
谢谢！我不得不玩了一点，让它适应我的设置，但它最终还是工作了！