Обтекание элемента внутри нового элемента, где он находится

Question

У меня есть контент, который содержит много текстовых разделов, абзацев и изображений. Я хочу поместить все теги изображений внутри родительского div. Ну, я думаю, что нет прямого способа сделать это (в jQuery, я имею в виду). Как я должен подходить к такому перемещению элементов. Следующий пример иллюстрирует мое намерение:

Оригинал Содержание:

<div id='content'> 
    Here are some texts. 
    A second line. 
    <a href='http://google.com'>Click Here!</a> 
    Another Line. 
    <img src='image.jpg' /> 
    Another another line. 
    <img src='secondImage.jpg' /> 
    Last line and many more to come. 
</div> 

После его обработки:

<div id='content'> 
    Here are some texts. 
    A second line. 
    <a href='http://google.com'>Click Here!</a> 
    Another Line. 
    <div class='image-parent'> 
    <img src='image.jpg' /> 
    </div> 
    Another another line. 
<div class='image-parent'> 
    <img src='secondImage.jpg' /> 
</div> 
    Last line and many more to come. 
</div> 

только отличается тем, что новый ДИВ оборачивает каждое изображение, в настоящее время.

Answer 1

Использовать .wrap() для искажения структуры HTML вокруг каждого элемента.

$("#content > img").wrap("<div class='image-parent'></div>");

.image-parent { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='content'> 
 
    Here are some texts. 
 
    A second line. 
 
    <a href='http://google.com'>Click Here!</a> 
 
    Another Line. 
 
    <img src='image.jpg' /> 
 
    Another another line. 
 
    <img src='secondImage.jpg' /> 
 
    Last line and many more to come. 
 
</div>