Как обернуть картинку нужным кодом?

Question

[DivineDraft]

Идет конструкция:

<div class="news-full-text">
текст
<img src="#" свойств и тд>
текст
<img src="#" свойств и тд>
текст
</div>

Каким образом можно обратиться к .news-full-text img и обернуть каждую из картинок примерным кодом, чтобы получилось вокруг img:

<div class="image">
    <img src="картинка">
    <div class="image-social">социальные кнопки</div>
</div>

Благодарим любим примерам или мыслям.

Answer 1

[0xD34F]

Кого надо обернуть:

const elements = document.querySelectorAll('.news-full-text img');

Оборачиваем:

for (const n of elements) {
  const el = document.createElement('div');
  el.className = 'image';
  el.appendChild(document.createElement('div'));
  el.lastChild.className = 'image-social';
  el.lastChild.textContent = 'социальные кнопки';
  n.insertAdjacentElement('afterend', el);
  el.insertAdjacentElement('afterbegin', n);
}

или

elements.forEach(n => n.outerHTML = `
  <div class="image">
    ${n.outerHTML}
    <div class="image-social">социальные кнопки</div>
  </div>
`);

Comments

[DivineDraft]

Премного Благодарен. Хорошего Вам дня.

Answer 2

[kreoTech]

Это можно сделать используя метод .wrap()
Набросал пример.
Картинки не отображаются, так как в коде не заданы адреса. Смотреть через инструменты разработчика.

Comments

[DivineDraft]

Огромное спасибо!