如何將兩列文本合并為一列？

如何用JS將兩列文本合二為一，變成這樣。我知道我可以用 CSS 做到這一點，但網站設計不允許這樣做。

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

跨度字串中也可能有標簽，應該保存它們。

原始代碼：

<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>

uj5u.com熱心網友回復：

您可以執行以下操作：

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

const row = document.querySelector('.row')

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

document.querySelectorAll('.col').forEach(e => e.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>

要附加到.right-col，您可以執行以下操作：

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')

left.forEach((e, i) => {
  rightCol.appendChild(e);
  rightCol.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>

要將每一span對包裝在 a 中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')

left.forEach((e, i) => {
  var div = document.createElement('div')
  div.appendChild(e);
  div.appendChild(right[i])
  rightCol.appendChild(div)
})

leftCol.remove()

span {
  display: block;
}
div{
  border:1px solid;
}

<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 html

上一篇：如何在discord.jsv13中使用全域斜杠命令？

下一篇：如何為一行數字邏輯存盤資料？