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

118

08 апреля 2022, 21:10

Возникла проблема так как я не верно что то делаю. Я хочу обернуть каждое изображение в 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" />

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отправка по нажатию

У меня есть часть кода которая при закрытии окна сразу выполняет код

238

javascript

Vue JS & Google maps. Директивы рендерятся как HTML теги

Использую библиотеку 2vue-google-maps для VueВ infoWindow есть кнопка с @click, проблема в том что она рендерится как обычный HTML тег и собственно не работает

215

Нужно ли вызывать Dispose для контекста Entity Framework?

Делаю проект просто с целью обучения, там создал класс CommentService, в котором содержатся методы для работы с БД (с целью сократить код в будущем):

258

Правильный вызов данных из коллекции

Объясните мне, а то не врублюсь, как будет быстрее и лучше, и почему:

156