Как создать div с другими элементами внутри из массива в js

Question

нужно из массива создать список из div-ов в котором так же создается "а" с классом, из массива берется href, далее создается img, scr которого тоже берется из массива, и название из массива. Выглядеть этот список должен так:

<div class="variants21">
 <div class="varic2"> <a class="notact2" href="javascript:l_image('images/m1')"><img src="images/m1.png"></a>Белый</div>
 <div class="varic2"> <a class="notact2" href="javascript:l_image('images/m2')" ><img src="images/m2.png"></a>Алюминий</div>
 <div class="varic2"> <a class="notact2" href="javascript:l_image('images/m3')"><img src="images/m3.png"></a>Слоновая кость</div>
....
  </div>

Как можно это все реализовать в js или JQ

let arr = [
    ["javascript:l_image('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image('images/m2')", "images/m2.png", "Алюминий"],
    ["javascript:l_image('images/m3')", "images/m3.png", "Слоновая кость"],
    ["javascript:l_image('images/m4')", "images/m4.png", "Антрацит"],
     ["javascript:l_image('images/m1')", "images/m1.png", "Белый"],
    ["javascript:l_image('images/m2')", "images/m2.png", "Алюминий"],
    ["javascript:l_image('images/m3')", "images/m3.png", "Слоновая кость"],
    ["javascript:l_image('images/m4')", "images/m4.png", "Антрацит"]
  ],
  content_el = document.querySelector(".ere")
   content_el2 = document.querySelector(".ere2")


arr.forEach((attrs) => {
  // создание элемента
  div1 = document.createElement("div");
  div2 = document.createElement("div");
  a = document.createElement("a");
  img = document.createElement("img");

  // добавление классов
  div1.classList.add("varic2");
  img.classList.add("notact2");

  // установка атрибутов и текста
  a.href = attrs[0];
  img.src = attrs[1];
  div2.innerText = attrs[2];



  // внутрь элемента a добавить элемент img
  a.appendChild(img);
  // внутрь элемента div добавить элемент a
  div1.appendChild(a);
  div1.appendChild(div2);

  // внутрь элемента body добавить элемент div
  content_el.appendChild(div1)
  
});


arr.forEach((attrs2) => {
  // создание элемента
  div12 = document.createElement("div");
  div22 = document.createElement("div");
  a2 = document.createElement("a");
  img2 = document.createElement("img");

  // добавление классов
  div12.classList.add("varic2");
  img2.classList.add("notact2");

  // установка атрибутов и текста
  a2.href = attrs2[0];
  img2.src = attrs2[1];
  div2.innerText = attrs2[2];



  // внутрь элемента a добавить элемент img
  a2.appendChild(img2);
  // внутрь элемента div добавить элемент a
  div12.appendChild(a2);
  div12.appendChild(div22);

  // внутрь элемента body добавить элемент div
  content_el2.appendChild(div12)
  
});

Answer 1

let div, img, a;

// массив с атрибутами
let arr = [
    ["#", "https://picsum.photos/200", "Белый"],
    ["#", "https://picsum.photos/200", "Алюминий"],
    ["#", "https://picsum.photos/200", "Слоновая кость"]
  ],
  content_el = document.querySelector(".variants21")


arr.forEach((attrs) => {
  // создание элемента
  div = document.createElement("div");
  a = document.createElement("a");
  img = document.createElement("img");

  // добавление классов
  div.classList.add("varic2");
  img.classList.add("notact2");

  // установка атрибутов и текста
  a.href = attrs[0];
  img.src = attrs[1];
  div.innerText = attrs[2];

  // внутрь элемента a добавить элемент img
  a.appendChild(img);
  // внутрь элемента div добавить элемент a
  div.appendChild(a);

  // внутрь элемента body добавить элемент div
  content_el.appendChild(div)
});

.varic2  { margin-top: 1em }
.notact2 { display: block }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
</head>

<body>
  <div class="variants21"></div>
</body>

</html>

БЛОГ НА HUSL

Как создать div с другими элементами внутри из массива в js

Ответы (1 шт):