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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
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.
Deja una respuesta