[BUG] Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': Nodes of type 'li' may not be inserted inside nodes of type 'UL'.

Segui tudo, porém o appendChild não funciona por nada, já revisei o cógido todo, acredito que possa ser alguma atualização ou mudança em sintaxe.

import { conectaApi } from "./conectaApi.js";

const lista = document.querySelector("[data-lista]");

function constroiCard(titulo, descricao, url, imagem){
    const video = document.createAttribute('li')
    video.className = "videos__item";
    video.innerHTML = `
    <iframe width="100%" height="72%" src="${url}"
    title="${titulo}" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen></iframe>
    <div class="descricao-video">
    <img src="${imagem}" alt="logo canal alura">
    <h3>${titulo}</h3>
    <p>${descricao}</p>
    </div>`
    return video;
}

async function listaVideos(){
    const listaApi = await conectaApi.listaVideos();
    listaApi.forEach(elemento => lista.appendChild(constroiCard(elemento.titulo, elemento.descricao, elemento.url, elemento.imagem))) 
}

listaVideos();