2

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>
4
  • La utilidad "Ver código" de los navegadores te muestra el código original del documento cargado por el navegador, y no te muestra los elementos que hayan sido creados o eliminados luego de la carga. Es como si abrieras el documento 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 Commented el 30 ene. 2023 a las 7:44
  • Hay alguna forma de solucionar esto ? Commented el 30 ene. 2023 a las 18:20
  • 2
    ¿Qué validador?
    – padaleiana
    Commented el 30 ene. 2023 a las 19:54
  • el caso especifico es para este ejemplo, cuando le damos clic derecho y ver codigo fuente de la pagina, no se muestran los elementos li usersantiago.onrender.com/api Commented el 30 ene. 2023 a las 21:09

2 respuestas 2

2

La función de "Ver código fuente" de los navegadores siempre te muestra el código original de la página, sin modificaciones. Si quieres ver el código actual, puedes usar el Inspector (una de las Herramientas del desarrollador). En Firefox puedes verlo pulsando Ctrl + K y seleccionando la pestaña Inspector y en Chromium con Ctrl + I y luego la pestaña de Elementos.

0

Ejecuté tu código en local, y se están creando los li dentro del ul de manera correcta.

introducir la descripción de la imagen aquí

2
  • 1
    Esto no responde la pregunta. Cuando tengas suficiente reputación, podrás comentar en cualquier publicación. Te sugiero que elimines esta no respuesta. También te invito a leer Cómo responder. Saludos Commented el 30 ene. 2023 a las 19:56
  • Por favor lee Cómo responder Commented el 30 ene. 2023 a las 20:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.