为汽车创建一个对象，该对象在<li>

我想打印页面上li标记的car属性。我的意思是显示名称和其他属性，如列表。

let car = {
name: "benz",
type: "mercedes",
price: 5000
}
var propertyName = ['name', 'type', 'price'];
let ulCreate = document.createElement('ul');
document.body.appendChild(ulCreate);
for (var prop in propertyName) {
var li = document.createElement('li');
li.innerHTML = propertyName[prop] + " :" + car[propertyName[prop]];
ulCreate.appendChild(li);
}

<body>

<div>
<ul id="carr">
</ul>
<br/><br/>

</div>
</body>

如果我没理解错的话，这应该会给你一些启发。

const myCar = {
name: "benz",
type: "mercedes",
price: 5000,
};

function renderCar(car) {
const listElement = document.getElementById("carr");
listElement.innerHTML += `
<li>name: ${car.name}</li>
<li>type: ${car.type}</li>
<li>price: ${car.price}</li>
`
}
renderCar(myCar);

<body>
<div>
<ul id="carr"></ul>
<br /><br />
</div>
</body>

如果我们有多个汽车(一个对象数组)，我们也可以遍历数组，并为每个成员的每个属性显示一个<li>。

如果你有一个汽车列表，你可以这样做:

let cars = [{
name: "benz",
type: "mercedes",
price: 5000
},
{
name: "fiat",
type: "punto",
price: 6000
},
{
name: "bmw",
type: "i900",
price: 7000
},
{
name: "toyota",
type: "corola",
price: 8000
}
]
let carsList = document.getElementById("carr");
cars.forEach(function(car, index) {
let name = document.createElement("li");
let type = document.createElement("li");
let price = document.createElement("li");
name.appendChild(document.createTextNode("Name: " + car.name));
type.appendChild(document.createTextNode("Type: " + car.type));
price.appendChild(document.createTextNode("Price: " + car.price));
carsList.appendChild(name);
carsList.appendChild(type);
carsList.appendChild(price);
})

<body>
<div>
<ul id="carr"></ul>
<br /><br />
</div>
</body>

您可以这样应用它。你可以在html中创建javascript，并在对象上放置属性。

let car = {
name: "benz",
type: "mercedes",
price: 5000
}
var propertyName = ['name', 'type', 'price'];
let ulCreate = document.createElement('ul');
document.body.appendChild(ulCreate);
for (var prop in propertyName) {
var li = document.createElement('li');
li.innerHTML = propertyName[prop] + " :" + car[propertyName[prop]];
ulCreate.appendChild(li);
}

let car = [{
name: "benz",
type: "mercedes",
price: 5000
},{
name: "A3",
type: "audi",
price: 8000
},{
name: "focus",
type: "ford",
price: 2500
}]
var propertyName = ['name', 'type', 'price'];
let ulCreate = document.createElement('ul');
document.body.appendChild(ulCreate);
for (var cr in car) {
for (var prop in propertyName) {
var li = document.createElement('li');
li.innerHTML = propertyName[prop]  + ":" + car[cr][propertyName[prop]]
ulCreate.appendChild(li);
}
}

相关内容

最新更新

热门标签：