主页 / 问题 / 1355132
Accepted
Alex
Asked:2022-04-29 12:41:27 +0000 UTC2022-04-29 12:41:27 +0000 UTC

如何在动态插入之前将跨度包装在 div 中？

  • 772

span根据给定的js代码，如何在动态插入之前将两者包装在一个div中？

    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>

javascript

1 个回答

  1. Best Answer

    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>

    • 2

相关问题