javascript - obtener - innerHTML agrega texto pero no etiquetas html

modificar html con javascript

Question

En primer lugar, perdón por esta pregunta para principiantes, pero recientemente aprendí JavaScript y ahora estoy aprendiendo a desarrollar aplicaciones de Windows 8. Aquí está el código en cuestión:

 var numbers = [1, 2, 3, 4, 5];
id(''numberList'').innerHTML = ''<ul>'';
for (var x in numbers) {
id(''numberList'').innerHTML += ''<li>'' + x + ''</li>'';
}
id(''numberList'').innerHTML = ''</ul>'';

Tengo esto en la función "listo" (para cualquier desarrollador de Windows 8) en mi archivo JS y ''numbersList'' se refiere a una etiqueta de sección en el cuerpo (del archivo HTML). La lista no aparece en absoluto cuando estoy ejecutando la aplicación. Sin embargo, cuando simplemente intento agregar texto en lugar de una lista como tal

 id(''numberList'').innerHTML = ''hello'';

el texto aparece ¿Podría haber un problema con la forma en que intento insertar los elementos html?

Answer 1

No puede agregar pedazos de HTML ilegal así. Una etiqueta <ul> sin </ul> es ilegal. Construya toda la cadena HTML en una variable de cadena y luego agregue una pieza de HTML legal o construya elementos DOM individuales, coloque el contenido en ellos y agréguelos al DOM.

Además, no itera una matriz con for (var x in numbers) ya que itera las propiedades de un objeto, no solo los elementos de la matriz y, aunque funcionará en algunas circunstancias, generalmente es una mala práctica que no debería usar.

Puede corregir esos errores y crear una sola cadena de HTML y luego agregarla una vez al final como esta:

 var numbers = [1, 2, 3, 4, 5];
var str = ''<ul>'';
for (var x = 0; x < numbers.length; x++) {
str += ''<li>'' + numbers[x] + ''</li>'';
}
str += ''</ul>'';
id(''numberList'').innerHTML = str;

Para completar, también puedes construir elementos DOM individuales:

 var numbers = [1, 2, 3, 4, 5];
var ul = document.createElement("ul"), li, tx;
for (var x = 0; x < numbers.length; x++) {
li = document.createElement("li");
tx = document.createTextNode(numbers[x]);
li.appendChild(tx);
ul.appendChild(li);
}
var parent = id(''numberList'');
parent.innerHTML = "";
parent.appendChild(ul);

También puede observar que el código que escribió originalmente no recuperaba los numbers[x] elementos de la matriz numbers[x] , sino que estaba usando los índices de la matriz x (que son los mismos que el contenido para que no note una diferencia en su Código de muestra). Dado que probablemente no sea lo que pretendías, probablemente también quieras solucionarlo.

Answer 2

Nunca debe usar += con innerHTML . En su lugar, construya la cadena y luego colóquela de una sola vez; de lo contrario, el motor intentará corregir su HTML incompleto.

var numbers = [1,2,3,4,5], str;
str = "<ul>";
for( var x in numbers) str += "<li>"+x+"</li>";
str += "</ul>";
id("numberList").innerHTML = str;

Dicho esto, una "mejor" forma de hacerlo sería la siguiente:

var numbers = [1,2,3,4,5], ul = document.createElement(''ul'');
for( var x in numbers) ul.appendChild(document.createElement(''li'')).appendChild(document.createTextNode(x));
var nl = id("numberList");
while(nl.firstChild) nl.removeChild(nl.firstChild);
nl.appendChild(ul);