Как обернуть span в div перед динамической вставкой?

Question

Как обернуть оба span в div перед динамической вставкой, в соответствии с данным JS-кодом?

    const left = document.querySelectorAll('.left-col span');
    const right = document.querySelectorAll('.right-col span');

    const rightCol = document.querySelector('.right-col');
    const leftCol = document.querySelector('.left-col');
    const leftColP = document.querySelector('.right-col');

    left.forEach((e, i) => {
      leftColP.appendChild(e);
      leftColP.appendChild(right[i]);
    });

    leftCol.remove();

span {
  display: block;
}

<div class="row">
  <div class="left-col col">
    <span>1 line of the left block</span>
    <span>2 line of the left block</span>
    <span>3 line of the left block</span>
    <span>4 line of the left block</span>
  </div>
  <div class="right-col col">
    <span>1 line of the right block</span>
    <span>2 line of the right block</span>
    <span>3 line of the right block</span>
    <span>4 line of the right block</span>
  </div>
</div>

Answer 1

const left = document.querySelectorAll('.left-col span');
const right = document.querySelectorAll('.right-col span');

const rightCol = document.querySelector('.right-col');
const leftCol = document.querySelector('.left-col');

[...rightCol.querySelectorAll('br')].forEach((e) => e.remove());

right.forEach((e, i) => {
  let divWrap = document.createElement('div');
  e.before(divWrap);
  divWrap.append(left[i]);
  divWrap.append(e);
});

leftCol.remove();

span {
  display: block;
}

<div class="row">
  <div class="left-col col">
    <span>1 line of the left block</span>
    <span>2 line of the left block</span>
    <span>3 line of the left block</span>
    <span>4 line of the left block</span>
  </div>
  <div class="right-col col">
    <span>1 line of the right block</span>
    <br>
    <span>2 line of the right block</span>
    <br>
    <span>3 line of the right block</span>
    <span>4 line of the right block</span>
  </div>
</div>

БЛОГ НА HUSL

Как обернуть span в div перед динамической вставкой?

Ответы (1 шт):