Wrap content in a tag within two divs using JQuery

Question

I'm trying to wrap content within an tag into two divs using jQuery. For example, I have the following markup:

<div class="column features">
  <div class="columnOne">
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
  </div>
</div>

What I'm trying to achieve is this:

<div class="column features">
  <div class="columnOne">
    <div class="column__item">
      <a href="#">
        <div class="column__content">
          Text
          <span>Subtext</span>
        </div>
        <div class="column__image">
          <img src="image.jpg">
        </div>
      </a>
    </div>
  </div>
</div>

My current approach does the job, but it doesn't work in IE11:

$('.column__item a').each((i, e) => {
  const $link = $(e);
  $link.contents().wrapAll('<div class="column__content">');
  $link.append($('<div class="column__image">').append($link.find('img')));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column features">
  <div class="columnOne">
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
    <div class="column__item">
      <a href="#">
        Text 
        <span>Subtext</span>
        <img src="image.jpg">
      </a>
    </div>
  </div>
</div>

I get a syntax error. I'm looking for a more cross-browser supported approach.

*doesn't work in IE* then just remove the arrow function `=>` and use an inline anonymous function `.each(function(i,e) {` — freedomn-m, Apr 21 '20 at 08:31

score 1 · Answer 1 · answered Apr 21 '20 at 08:30

The problem here is your arrow function, which isn't supported by IE 11. Just rewrite it like this:

$('.column__item a').each(function(i, e) {
    const $link = $(e);
    $link.contents().wrapAll('<div class="column__content">');
    $link.append($('<div class="column__image">').append($link.find('img')));
  });

Wrap content in a tag within two divs using JQuery

1 Answers1