在使用其他功能創建該元素后，無法選擇帶有dom的元素-appendChild-有解無憂

我應該如何選擇由函式創建的元素。第一個函式運行良好，但是當我嘗試選擇在該函式中創建的元素時，它不起作用

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("Hi");
});

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

    <script src="script.js"></script>
  </body>
</html>

uj5u.com熱心網友回復：

這是因為您試圖在將click事件paragraph添加到 DOM 之前將其附加到您的標記。

您需要將您的onclick這個新的事件監聽器內，以后你把它添加到您的.body股利。

例子：

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("Hi");
  });
});

根據要求，為了清楚起見，您可以將其中的一些拆分為自己的方法。隨意使用您自己的樣式作為示例：

const onClickLop = (e) => {
  const el = document.createElement("p");
  const bodyDiv = document.querySelector(".body");

  el.appendChild(document.createTextNode("lopas"));
  bodyDiv.appendChild(el);


  el.addEventListener("click", onClickLopas);
};

const onClickLopas = (e) => {
    console.log("Hi");
});


document.querySelector(".lop").addEventListener("click", onClickLop);

uj5u.com熱心網友回復：

問題：

您在單擊時創建 p 元素 .lop
您嘗試在頁面加載時添加事件偵聽器。此時根本沒有p標簽。

解決方案：

創建 p 標簽后添加事件偵聽器。
您也可以使用參考c而不是 querySelector。

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);

  c.addEventListener("click", function() {
    console.log("Hi");
  });
});

<!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>
  <div class="lop">s</div>
  <div class="body"></div>
</body>

</html>

uj5u.com熱心網友回復：

為p元素添加事件偵聽器的代碼在創建它的代碼之前執行。將事件處理程式移動到第一個函式中，以便在創建元素并將其添加到檔案之前不會觸發它。但是，這意味著每次單擊第一個元素時，p都會使用自己的處理程式創建一個新元素（單獨的問題/答案）。

此外，通過這樣做，您可以整合一些代碼。

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

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

});

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

    <script src="script.js"></script>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406404.html

標籤：

上一篇：使用DOM遞增HTML編號

下一篇：如何在javascript中組合2個onclick函式？