Как обернуть каждое изображение в отдельный блок?

Question

Возникла проблема так как я не верно что то делаю. Я хочу обернуть каждое изображение в div с любым именем class.

К примеру:

<img src="img1.jpg" alt="">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">

Дальше я пишу в js вот так

let images = [...document.querySelectorAll("img")];

var wrapper = document.createElement('div');

var body = document.getElementsByTagName('body')[0];

wrapper.setAttribute('class', 'inset');

for(var i = 0; i < images.length; i++){

}

body.appendChild(wrapper);

И в итоге тег inset оборачивает все изображения а надо обернуть так

<div class="inset"><img src="img1.jpg" alt=""></div>
<div class="inset"><img src="img2.jpg" alt=""></div>
<div class="inset"><img src="img3.jpg" alt=""></div>

То есть каждое изображение в отдельный div.inset

Помогите разобраться

Answer 1

document.querySelectorAll("img").forEach(img => {
  var wrapper = document.createElement('div');
  wrapper.setAttribute('class', 'inset');
  wrapper.appendChild(img);
  document.body.appendChild(wrapper);
});

.inset {
  border: 2px inset lightgreen;
  margin:2px;
  padding:4px;
  display:inline-block;
}

<img src="img1.jpg" alt="AAA" />
<img src="img2.jpg" alt="BBB" />
<img src="img3.jpg" alt="CCC" />

БЛОГ НА HUSL

Как обернуть каждое изображение в отдельный блок?

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