только данные немного поправил
<!DOCTYPE html>
<html>
<head>
<title>Cars Details</title>
<script>
var cars = [
{ "car":
{
"id": 1,
"name": "BMW",
"year": 1999
},
"parts": [
{
"id": 11,
"name": "engine"
},
{
"id": 12,
"name": "window"
}]
},
{ "car":
{
"id": 2,
"name": "Audi",
"year": 2000
},
"parts": [
{
"id": 21,
"name": "engine"
},
{
"id": 22,
"name": "window"
}]
}
];
window.onload = function () {
var fragment = document.createDocumentFragment();
cars.forEach(function (item, i, arr) {
item.parts.forEach(function (part, j, ar) {
var d = document.createElement('div');
d.setAttribute('id', part.id);
fragment.appendChild(d);
d.innerHTML = 'Part ' + part.id + ' (' +part.name + ') ' + item.car.name ;
});
});
parts.appendChild(fragment);
}
</script>
</head>
<body>
<div id="parts"></div>
</body>
</html>
|
Цитата:
|
|
В современных браузерах эффект от такой оптимизации может быть различным, а на небольших документах иногда и отрицательным.
|
https://learn.javascript.ru/multi-insert