Tengo el siguiente código a continuación, donde estoy tratando de crear una etiqueta ul, y dentro de ella un bucle for para crear dinámicamente elementos li. Se crea una etiqueta ul de cierre separada después de que se completa el ciclo.

El código funciona. Excepto por el problema de que el código no se ejecuta en el orden que yo quiero. Las etiquetas ul se cierran antes de que el bucle for pueda procesarse en la página, lo que hace que el html se parezca más a:

<ul></ul><li>0</li><li>1</li>...

var insidethediv = document.getElementById("insidethediv");
var numero = 5;

insidethediv.innerHTML = "<ul>";
for (i = 0; i < 5; i++){
insidethediv.innerHTML += "<li>"+i+"</li>";
}
insidethediv.innerHTML += "</ul>";
<div id="insidethediv"></div>
1
Jason Chen 11 nov. 2017 a las 07:14

2 respuestas

La mejor respuesta

Asignar directamente a innerHTML es una mala idea aquí. innerHTML espera un fragmento html completo, es decir, todas las etiquetas abiertas deben estar cerradas. Pero aquí está asignando un fragmento html parcial mientras lo está construyendo. Intente crear primero el html completo y luego asígnelo a innerHTML, p. Ej. al igual que:

var insidethediv = document.getElementById("insidethediv");
var numero = 5;

var s = "<ul>";
for (i = 0; i < 5; i++){
    s += "<li>"+i+"</li>";
}
s += "</ul>";
insidethediv.innerHTML = s;
2
safsaf32 11 nov. 2017 a las 04:23

Personalmente prefiero usar las funciones document.createElement ( nombre de etiqueta ) y Elemento .append ( referencia de elemento creado ). De esta manera, podemos manipular cada etiqueta

  • individual (como asignar diferentes colores) y representar las etiquetas HTML de forma dinámica en lugar de atascar todo en una cadena y luego insertarla como un elemento innerHTML.

    var insidethediv = document.getElementById("insidethediv");
    var numero = 5;
    
    var ul_element = document.createElement("ul");
    insidethediv.append(ul_element);
    
    var li_element;
    
    for (var i = 0; i < 5; i++){
        li_element = document.createElement("li");
        ul_element.append(li_element);
        li_element.innerHTML = i;
    }
    <div id="insidethediv"></div>
    1
    Jinxuan Cang 11 nov. 2017 a las 15:43