Como crear una lista HTML en Javascript con DOM

Hola a todos, hoy os voy a explicar como crear una lista HTML en Javascript

Para crear elementos HTML con Javascript de forma dinámica.

Para crear una lista en Javascript, lo haremos de la siguiente forma:

function init() {

    let ul = document.createElement("ul");
    let ol = document.createElement("ol");

    let li1 = document.createElement("li");
    let li1Texto = document.createTextNode("Elemento desordenado 1");
    li1.appendChild(li1Texto);
    
    let li2 = document.createElement("li");
    let li2Texto = document.createTextNode("Elemento desordenado 2");
    li2.appendChild(li2Texto);
    
    let li3 = document.createElement("li");
    let li3Texto = document.createTextNode("Elemento desordenado 3");
    li3.appendChild(li3Texto);

    ul.appendChild(li1);
    ul.appendChild(li2);
    ul.appendChild(li3);

    let li4 = document.createElement("li");
    let li4Texto = document.createTextNode("Elemento ordenado 1");
    li4.appendChild(li4Texto);
    
    let li5 = document.createElement("li");
    let li5Texto = document.createTextNode("Elemento ordenado 2");
    li5.appendChild(li5Texto);
    
    let li6 = document.createElement("li");
    let li6Texto = document.createTextNode("Elemento ordenado 3");
    li6.appendChild(li6Texto);


    ol.appendChild(li4);
    ol.appendChild(li5);
    ol.appendChild(li6);

    document.body.appendChild(ul);
    document.body.appendChild(ol);

}


window.onload = init;

Este es el resultado:

También os lo dejo en función:

function init() {

    let elementsUL = [
        "Elemento desordenado 1",
        "Elemento desordenado 2",
        "Elemento desordenado 3"
    ]

    let ul = createUL(elementsUL);

    let elementsOL = [
        "Elemento ordenado 1",
        "Elemento ordenado 2",
        "Elemento ordenado 3"
    ]

    let ol = createOL(elementsOL);

    document.body.appendChild(ul);
    document.body.appendChild(ol);

}

function createUL(elements) {
    let ul = document.createElement("ul");

    if (elements && Array.isArray(elements)) {
        for (let index = 0; index < elements.length; index++) {
            const element = elements[index];
            let li = document.createElement("li");
            let liText = document.createTextNode(element);
            li.appendChild(liText);
            ul.appendChild(li);
        }
    }

    return ul;
}

function createOL(elements) {
    let ol = document.createElement("ol");

    if (elements && Array.isArray(elements)) {
        for (let index = 0; index < elements.length; index++) {
            const element = elements[index];
            let li = document.createElement("li");
            let liText = document.createTextNode(element);
            li.appendChild(liText);
            ol.appendChild(li);
        }
    }

    return ol;
}


window.onload = init;

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.