Javascript 如何将属性从对象分配给HTML元素

我在Js中有一个对象，在HTML中有一些卡片，现在我如何将该对象的属性分配给特定的卡片，这样当我在Js中使用filter函数时，我可以显示与我过滤的属性匹配的卡片？在纯Js中，不使用Json或jQuery，是否可以这样做

（HTML卡）

（Js对象

const vehicles=[{
id:01，
类型：'汽车'，
车型：“丰田aygo”，
价格：53，
变速器：“手动”，
乘客：“4”
},
{
id:02，
类型：'汽车'，
型号：“福特福克斯”，
价格:64，
变速器：“自动”，
乘客：“5”
},
{
id:03，
类型：'汽车'，
型号：“雪铁龙2cv”，
价格:30,，
变速器：“手动”，
乘客：“2”
},
{
id:04，
类型：'汽车'，
型号：“兰博基尼胡拉坎spyder”，
价格：2400美元，
变速器：“手动”，
乘客：“2”
},
{
id:05，
类型：“suv”，
型号：“沃尔沃xc60”，
价格：185，
变速器：“手动”，
乘客：“5”
},
{
id:06，
类型：“suv”，
型号：“福特库加”，
价格：92，
变速器：“自动”，
乘客：“5”
},
{
id:07，
类型：“suv”，
车型：“路虎揽胜运动版”，
价格:240，
变速器：“自动”，
乘客：“5”
},
{
id:08，
类型：'van'，
型号：“沃克斯豪尔维瓦罗”，
价格:60,，
变速器：“手动”，
乘客：“3”
},
{
id:09，
类型：'van'，
型号：“雷诺kangoo”，
价格:50,，
变速器：“手动”，
乘客：“2”
},
{
id:10，
类型：'承运人'，
型号：“阿罕布拉座椅”，
价格:200,，
变速器：“自动”，
乘客：“7”
}
]
/*常数匹配车辆=车辆。过滤器（功能（车辆）{
if（vehicle.type==checkValue&&vehicle.passengers==pasNum）{
返回真值
} 
返回错误
})
匹配车辆forEach（功能（车辆）{
控制台日志（车辆模型）
})*/

.price{
字体系列：“Popins”，无衬线；
字号：1.2rem；
颜色：#eb232c；
显示器：flex；
}
.价格图标{
字号：1.2rem；
右边距：5px；
}
.price_num{
字号：1.1rem；
}
.线路{
宽度：100%；
高度：2倍；
背景：#fff；
位置：绝对位置；
}
.汽车包装{
显示器：flex；
证明内容：之间的空间；
填充：10px 25px；
}
.汽车信息{
显示器：flex；
对齐项目：居中；
保证金：0；
填充：0；
}
.info_图标{
颜色：#eb232c；
字体大小：0.9rem；
}
.info_文本{
字体系列：“罂粟花”，无衬线；
字号：700；
字号：1rem；
颜色：#1b232f；
填充顶部：10px；
左侧填充：10px；
}
.btn_酷{
z指数：100；
填充：10px 70px；
文本对齐：居中；
}
.btn{
背景：无；
边框：2px实心#1b232f；
字体系列：“罂粟花”，无衬线；
字体大小：0.8rem；
字号：700；
颜色：#fff；
文本转换：大写；
填充：12px 20px；
保证金：5px；
光标：指针；
过渡：颜色0.4线性；
位置：相对位置；
}
.btn:悬停{
颜色：#eb232c；
}
.btn：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景#1b232f；
z指数：-1；
转变：转变0.5s；
变换原点：0；
过渡计时功能：立方贝塞尔（0.5,1.6,0.4,0.7）；
}
.btn1：：之前{
变换：scaleX（0）；
}
.btn1:悬停：：之前{
变换：scaleX（1）；
}
.btn2{
颜色：#1b232f；
}
/*指标*/
.指标{
位置：绝对位置；
左：50%；
底部：30px；
z指数：2；
转化：translateX（-50%）；
}
.指标组{
显示：内联块；
宽度：20px；
高度：20px；
颜色：#fff；
背景色：#ecf1f8；
边界半径：50%；
文本对齐：居中；
线高：25px；
利润率：0.3倍；
}
.指示灯处于激活状态{
背景：#eb232c；
}
/*节选择*/
.选择内容{
文本对齐：居中；
边缘顶部：50px；
填充：40px；
}
。请选择_标题{
字体系列：“罂粟花”，无衬线；
字体大小：1.3rem；
字号：500；
显示：内联块；
}
.选择_头：：后{
内容：“；
显示：块；
宽度：100%；
高度：5px；
边缘顶部：20px；
背景#1b232f；
过渡：宽度0.3s至0.0s；
}
.选择{
显示：网格；
网格模板行：1fr 1fr；
网格模板柱：1fr 1fr；
}
.选择项目{
滤光片：亮度（80%）；
过渡：过滤0.5s；
最大宽度：300px；
最大高度：300px；
显示：块；
溢出：隐藏；
光标：指针；
保证金：自动；
}
.选择标题{
位置：绝对位置；
填充：6px 32px；
背景色：#eb232c；
顶部：10px；
左：10px；
}
.选择标题h3{
字体系列：“罂粟花”，衬线；
字体大小：0.8rem；
字号：500；
颜色：#fff；
文本转换：大写；
}
。选择项目：悬停{
滤光片：亮度（100%）；
}
.选择{
显示：块；
宽度：100%；
高度：300px；
位置：中心；
过渡：1s；
}
.选择\u img:悬停{
宽度：330px；
高度：330px；
位置：中心；
}
.carrier1，
.van1{
边缘顶部：50px；
边缘底部：50px；
}
/*部分原因*/
.为什么{
背景色：#ecf1f8；
填充物：5px；
}
.为什么{
显示器：flex；
填充：40px 0 40px 0；
}
.为什么要用盒子{
填充：10px；
宽度：100%；
最大宽度：300px；
显示器：flex；
证明内容：之间的空间；
填充：0 15px；
}
.为什么？第一个孩子{
左侧填充：0；
}
.为什么？盒子：最后一个孩子{
右边填充：0；
}
1.为什么要使用标识{
宽度：20%；
}
.为什么{
字号：2rem；
填充：13px；
裕度：-20px 30px 0；
颜色：#eb232c；
/*边界半径：50%；
边框：3倍红色实心*/
}
.为什么要用英镑{
填充：15px 20px；
}
.为什么要看内容{
宽度：70%；
文本对齐：左对齐；
}
.为什么{
字体系列：“罂粟花”，无衬线；
字号：1rem；
颜色：#1b232f；
字母间距：1px；
}
.为什么{
字体大小：400；
字体系列：“Roboto”，无衬线；
字体大小：0.8rem；
颜色：#777；
线高：1.3；
}
/*按类型浏览部分*/
跨度{
保证金：0；
填充：0；
}
.类别_main{
保证金：0自动；
填充：40px0；
溢出：隐藏；
}
.类别(img){
宽度：100%；
高度：210px；
}
.邮资已付{
保证金：自动；
}
.类别_hea
 vehicleFiltered = [];
  
  
  const matchingVehicle = vehicles.filter(function(vehicle){
    if(vehicle.type == 'suv' && vehicle.passengers == 5){
      vehicleFiltered.push({
          id: vehicle.id,
        type: vehicle.type,
        model: vehicle.model,
        price: vehicle.price,
        transmission: vehicle.transmission,
        passengers: vehicle.passengers
      }) 
     // console.log(vehicleFiltered)
     
    } 
  })
  


this.populate();

function populate(){

    ul = document.createElement('ul');

    document.getElementById('myItemList').appendChild(ul);
    
    vehicleFiltered.forEach(function (item) {
    let li = document.createElement('li');
    ul.appendChild(li);
    
    li.innerHTML += item.model;
    });
  }