Wrap child elements inside parent using jQuery

Question

I do have a Markup as below, this HTML is rendering from Joomla CMS. I am looking for a jQuery solution to rearrange this HTML without changing its PHP.

<div class="item column-1">
  <div class="page-header">
    <h2>English Article 3</h2>
  </div>

  <dl class="article-info muted">
    <dt class="article-info-term ss">Details</dt>
    <dd class="createdby">Written by <span>Super User</span></dd>
    <dd class="category-name">Category: <a href="#">Academic</a></dd>
    <dd class="create"><time datetime="">Created: 31 May 2020</time></dd>
  </dl>

  <div class="pull-left item-image">
    <a href="#">
      <img src="/images/body-img.jpeg" alt="" />
    </a>
  </div>

  <p>Save time in Word with new buttons ...</p>
  <p>Reading is easier, too, in the new Reading view...</p>
  <p class="readmore">
    <a class="btn" href="#">Read more</a>
  </p>
</div>

Rearrange mean is, I need to wrap inner contents into main DIV as below:

<div class="item column-1">
  <div class="blog-image">
    <div class="pull-left item-image">
      <a href="#">
        <img src="/images/body-img.jpeg" alt="" />
      </a>
    </div>
  </div>

  <div class="blog-description">
    <div class="page-header">
      <h2>English Article 3</h2>
    </div>

    <dl class="article-info muted">
      <dt class="article-info-term ss">Details</dt>
      <dd class="createdby">Written by <span>Super User</span></dd>
      <dd class="category-name">Category: <a href="#">Academic</a></dd>
      <dd class="create"><time datetime="">Created: 31 May 2020</time></dd>
    </dl>

    <p>Save time in Word with new buttons ...</p>
    <p>Reading is easier, too, in the new Reading view...</p>
    <p class="readmore">
      <a class="btn" href="#">Read more</a>
    </p>
  </div>
</div>

Can anybody tell me is it possible in jquery using any of builtin functions wrap or wrapAll.

Thank you.

Answer 1

You can wrap the entire contents of the div in a new one with class blog-description, then create a new .blog-image div at the start and move the image into it:

$('.item').each(function() {
  // put everything into the blog-description div
  $(this).children().wrapAll('<div class="blog-description" />');
  // add a blog-image div and move the image to it
  $('<div class="blog-image" />').append($(this).find('.item-image')).prependTo($(this));
});
//
// console.log($('.item').html());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item column-1">
  <div class="page-header ">
    <h2>English Article 3</h2>
  </div>

  <dl class="article-info muted">
    <dt class="article-info-term ss">Details</dt>
    <dd class="createdby">Written by <span>Super User</span></dd>
    <dd class="category-name">Category: <a href="#">Academic</a></dd>
    <dd class="create"><time datetime="">Created: 31 May 2020</time></dd>
  </dl>

  <div class="pull-left item-image">
    <a href="#">
      <img src="https://via.placeholder.com/100" alt="">
    </a>
  </div>

  <p>Save time in Word with new buttons ...</p>
  <p>Reading is easier, too, in the new Reading view...</p>
  <p class="readmore">
    <a class="btn" href="#">Read more</a>
  </p>
</div>
<div class="item column-1">
  <div class="page-header ">
    <h2>English Article 4</h2>
  </div>

  <dl class="article-info muted">
    <dt class="article-info-term ss">Details</dt>
    <dd class="createdby">Written by <span>Super User</span></dd>
    <dd class="category-name">Category: <a href="#">Academic</a></dd>
    <dd class="create"><time datetime="">Created: 31 May 2020</time></dd>
  </dl>

  <div class="pull-left item-image">
    <a href="#">
      <img src="https://via.placeholder.com/50" alt="">
    </a>
  </div>

  <p>Save time in Word with new buttons ...</p>
  <p>Reading is easier, too, in the new Reading view...</p>
  <p class="readmore">
    <a class="btn" href="#">Read more</a>
  </p>
</div>