Всем привет. Есть задание создать HTML-страницу и написать код JavaScript, который будет отображать данные из объекта JSON со структурой следующим образом:
Безымянный.jpg
Попытался взаимодействовать с JSON через JSON.parse и добавил стили элементам:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#marketing{
width: 100px;
margin: 30px;
padding: 30px;
border: 4px solid black;
background: #9932CC;
text-align:center;
box-shadow: 0 0 20px rgba(0,0,0,2);
}
#sales{
width: 100px;
margin: 30px;
padding: 30px;
border: 4px solid black;
background: #1E90FF;
text-align:center;
}
</style>
</head>
<body>
<div class="mark"><div id="marketing"></div></div>
<div class="sal"><div id="sales"></div></div>
<script>
var s = '{"title" : "marketing"}';
var s1 = '{"title" : "sales"}';
var obj = JSON.parse(s);
var obj1 = JSON.parse(s1);
document.getElementById("marketing").innerHTML +=
obj.title + "<br>";
document.getElementById("sales").innerHTML +=
obj1.title + "<br>";
</script>
</body>
</html>
вот что вышло
Безымянный (1).jpg
Выглядит как нужно, но мне нужно повторять эти блоки, чтобы один шел за другим несколько раз, как размножить
<div class="mark">
и
<div class="sal">
?