Hice un documento html en el cual tengo un elemento <ul></ul>
que después tengo que llenarlo con elementos <li></li>
usando javascript, visualmente lo hace bien, el caso es que cuando le doy ver código fuente de la pagina no me muestra los elementos <li></li>
sino solamente el <ul></ul>
pero como dije visualmente si se logra apreciar todos los elementos recuperados con javascript, necesito solucionar esto ya que el validador no me revisa la parte visual sino el codigo fuente de la pagina HTML, agradezco mucho su ayuda. El código que uso para eso es el siguiente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
</ul>
<form action="http://localhost:3000/api" method="get">
<input name="name" placeholder="Employee Name">
<button type="submit" id="add">Add</button>
</form>
<br>
<form action="http://localhost:3000/api" method="get">
<input type="hidden" name="kill">
<button type="submit" id="kill" onclick="fetchData()">Kill All</button>
</form>
<script>
//traer datos
document.addEventListener("DOMContentLoaded", e => {
fetchData();
})
//et
const fetchData = async () => {
try {
const res = await fetch('http://localhost:3000/api/getAll');
const data = await res.json()
//empl(data);
let elementos = '';
for (i = 0; i < data.length; i++){
var li = document.createElement("li");
elementos = data[i].name;
li.appendChild(document.createTextNode(elementos));
document.querySelector("ul").appendChild(li);
}
} catch (error) {
console.log("errorsesr", error);
}
}
//fin traer traer datos
</script>
</body>
</html>
html
en un bloc de notas, el código de Javascript no se interpreta y por ende los elementos que este código genera no se visualizan. Saludos