Разделить div при большом вложении строк

Question

Вывожу данные из mysql через while(php) - 12 строк, помещая каждый в div.

<div id="block" style="background:#b4fd96; width:100px; float: left;" >
  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
  <div>7</div>  
  <div>8</div>  
  <div>9</div>  
  <div>10</div>  
  <div>11</div>  
  <div>12</div>  
  
</div>

Но мне нужно вывести если количество строк в первом div больше 4, нужно все остальные данные размещать в другом div. Но в том же порядке.

<div id="block" style="background:#b4fd96; width:100px; float: left;" >
  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
    
  
</div>

<div id="block2" style="background:#ffdddd; width:100px; float: left;" >
  <div>5</div>  
  <div>6</div>
  <div>7</div>  
  <div>8</div>  
  <div>9</div>  
  <div>10</div>  
  <div>11</div>  
  <div>12</div>  
  
</div>

Подскажите, как такое реализовать или куда копать.

Используется только на ПК, с минимальным расширением.

Answer 1

Думаю это подойдёт:

html:

<div id="block" style="background:#b4fd96; width:100px; float: left;"></div>
<div id="block2" style="background:#ffdddd; width:100px; float: left;"></div>

JavaScript:

const block = document.getElementById("block")
const block2 = document.getElementById("block2")


const arr = [1,2,3,4,5,6,7,8,9,10,11,12]

if(arr.length < 4) {
    for(let i = 0; i < arr.length; i++) {
        const div = document.createElement("div")
        div.innerText = arr[i]
        block.append(div)
    }
} else {
    for(let i = 0; i < 4; i++) {
        const div = document.createElement("div")
        div.innerText = arr[i]
        block.append(div)
    }
    for(let i = 4; i < arr.length; i++) {
        const div = document.createElement("div")
        div.innerText = arr[i]
        block2.append(div)
    }
}

Answer 2

Можно функциональным подходом:

const block = document.getElementById("block")
const block2 = document.getElementById("block2")

// Если получаете данные из backend'а

// const getData = async () => {
//  return await axios.get("Ваша ссылка")
// }
// const arr = getData()

const arr = [1,2,3,4,5,6,7,8,9,10,11,12]

const createElement = (block, start, length) => {
    for(let i = start; i < length; i++) {
        const div = document.createElement("div")
        div.innerText = arr[i]
        block.append(div)
    }
}

if(arr.length < 4) {
    createElement(block, 0, 4)
} else {
    createElement(block, 0, 4)
    createElement(block2, 4, arr.length)
}

БЛОГ НА HUSL

Разделить div при большом вложении строк

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