Como crear una lista HTML en Javascript

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.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *