Problem with loop adding all values of an array at a time

Ok so i needed to sort each object using their ‘tipo’ as parameter. ‘urgente’ should always be printed first on my screen then ‘prioritario’. The solution i came up with was to simply separate em into two arrays then print each array at a time on my screen. THe only problem is that everytime i time to append an array inside my

  • it appens all the values at a time

    ok so heres my html:

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <script src="./js.js" defer></script>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <ul>
            <li>ok</li>
    
            <li>ok</li>
            <li>ok</li>
            <li>ok</li>
            <li>ok</li>
            <li>ok</li>
            <li>ok</li>
    
    
        </ul>    
    </body>
    </html>
    
    

    heres my script

    let tasks = [
        {
          titulo: "Comprar comida para o gato",
          tipo: "Urgente"
        },
        {
          titulo: "Limpar o quarto",
          tipo: "urgente"
        },  
        {
          titulo: "Consertar Computador",
          tipo: "prioritário"
        },  
        {
          titulo: "Guardar dinheiro do lanche",
          tipo: "Urgente"
        },  
        {
          titulo: "Beber água",
          tipo: "prioritário"
        },    
        {
            titulo: "Alongamento",
            tipo: "prioritário"
          }, 
      ]
    
    
    
      let prioritário = []
      let urgente = []
    
      for (i = 0; i < tasks.length; i++) {
        if (tasks[i].tipo == "prioritário") {
            prioritário.push(tasks[i].titulo)
        } else {
            urgente.push(tasks[i].titulo)
        }
    }
    
    
    let li = document.createElement('li')
    let ul = document.querySelector('ul')
    
    for (i = 0; i < prioritário.length; i++) {
        li.append(prioritário)
        console.log(li)
        
    }
    
    
    
    

    Ok so i was expecing three differnet

  • on my scrren but somehow it is printing everything together like this

    enter image description here

    Can you guys please explain to me why this is happening and how to solve it

    I don’t want to store values as paraphs