How the single ordered data structure of js generates a double-layer ordered list on the page

has the following data:

{
    "data": [
        {
            "title": "1",
            "link": "",
            "date": "2018-6-26",
            "views": 153,
            "info": ""
        },
        {
            "title": "2",
            "link": "",
            "date": "2018-6-25",
            "views": 460,
            "info": ""
        },
        {
            "title": "3",
            "link": "",
            "date": "2018-6-24",
            "views": 392,
            "info": ""
        },
        {
            "title": "4",
            "link": "",
            "date": "2018-6-23,
            "views": 318,
            "info": ""
        },
        {
            "title": "5",
            "link": "",
            "date": "2018-6-22",
            "views": 241,
            "info": ""
        },
        {
            "title": "6",
            "link": "",
            "date": "2018-6-21",
            "views": 283,
            "info": ""
        },
        {
            "title": "7",
            "link": "",
            "date": "2018-6-20",
            "views": 216,
            "info": ""
        }
    ]
}

the structure of html is as follows

<ul>
    <li>
        <div>1</div>
        <div>2</div>
    </li>
    <li>
        <div>3</div>
        <div>4</div>
    </li>
    <li>
        <div>5</div>
        <div>6</div>
    </li>
    <li>
        <div>7</div>
        <div>8</div>
    </li>
</ul>

how can js use the data loop above to generate such an ordered html structure?

Mar.22,2021

let fragment = document.createDocumentFragment();
  let ulNode = document.createElement("ul");
  let liNodes = []
  data.map((item, index) => {
    let liNode = document.createElement("li");
    liNode.innerHTML = item.title
    liNodes.push(liNode)

    if (index % 2 !== 0) {
      let divNode = document.createElement("div");
      console.log(liNodes)
      divNode.appendChild(liNodes[index - 1])
      divNode.appendChild(liNodes[index])
      ulNode.appendChild(divNode)
    }
  })
  const dataLength = data.length;

  if (dataLength % 2 !== 0) {
    let divNode = document.createElement("div");
    divNode.appendChild(liNodes[dataLength - 1])
    ulNode.appendChild(divNode)
  }
  fragment.appendChild(ulNode)
  document.getElementById("app").appendChild(fragment)
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3152f-2bd6a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3152f-2bd6a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?