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

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]

$('.news-full-text img')
  .wrap('<div class="image"></div>')
  .after('<div class="image-social">социальные кнопки</div>');

или

$('.news-full-text img').replaceWith(function() {
  return `
    <div class="image">
      ${this.outerHTML}
      <div class="image-social">социальные кнопки</div>
    </div>`;
});

или

$('.news-full-text').html((i, html) => html.replace(/<img .*?>/g, m => `
  <div class="image">
    ${m}
    <div class="image-social">социальные кнопки</div>
  </div>
`));

Comments

[DivineDraft]

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

Answer 2

[kreoTech]

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

Comments

[DivineDraft]

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