es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • No se puede seleccionar el elemento con el DOM después de crear ese elemento con otra función – appendChild.

No se puede seleccionar el elemento con el DOM después de crear ese elemento con otra función – appendChild.

02 Aug, 2023 Programación

Cómo se supone que debo seleccionar mi elemento que ha sido creado por una función. La primera función funciona bien, pero cuando intento seleccionar el elemento que se ha creado en esa función, no funciona.

let d = document.querySelector(".lop");
let body = document.querySelector(".body");

d.addEventListener("click", function () {
  let c = document.createElement("p");
  c.appendChild(document.createTextNode("lopas"));
  body.appendChild(c);
});

document.querySelector("p").addEventListener("click", function () {
  console.log("Hola");
});

<!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>Documento</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="lop">s</div>
    <div class="body"></div>

    <script src="script.js"></script>
  </body>
</html>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En la sección de código proporcionada, el segundo escuchador de eventos adjunto al elemento p no funciona porque intenta seleccionar un elemento que aún no ha sido creado. Este elemento se está creando dinámicamente dentro del escuchador de eventos click que está adjunto al elemento .lop.

    Para seleccionar el elemento p creado dinámicamente, puedes agregar una nueva clase o id a este elemento en el momento de su creación, y luego utilizar esta clase o id para seleccionar el elemento. Por ejemplo:

    d.addEventListener("click", function () {
  let c = document.createElement("p");
  c.appendChild(document.createTextNode("lopas"));
  c.setAttribute("id", "new-paragraph");
  body.appendChild(c);
});

document.querySelector("#new-paragraph").addEventListener("click", function () {
  console.log("Hola");
});

    En el código anterior, hemos agregado un nuevo id al elemento p creado dinámicamente utilizando setAttribute. Hemos establecido el id como “new-paragraph”. Ahora, en el segundo escuchador de eventos, hemos utilizado querySelector para seleccionar el elemento p con el id “new-paragraph” y hemos adjuntado un escuchador de eventos click a él.

    De esta manera, puedes seleccionar elementos creados dinámicamente agregando un identificador único a ellos en el momento de su creación.

Comments are closed.