如何使用 JavaScript 將文字附加到 innerHTML 中，而不破壞後代事件監聽器？

是的，可以將文字附加到 innerHTML 中，而無需破壞後代事件監聽器。我們來看一個例子。首先，我們將使用 JavaScript 建立兩個函式。以下是 demoFunc() −

function demoFunc() {
   alert("Hello");
}

上面的 demoFunc() 函式將顯示一個警報框和一條訊息。這樣，當你載入網頁時，start() 函式就會載入，並在 div 中用“One”顯示“Two”。以下是 start() 函式。我們使用 innerHTML 屬性將文字“One”從 div 追加到文字“Two”中 −

function start() {
   mydiv.innerHTML += "Two";
}

以下是我們的 HTML 程式碼，使用 − 呼叫 start()，載入網頁時

<body onload="start()">

div id 為 mydiv，樣式為橙色背景 −

<div id="mydiv" style="background:orange;">

在 <div> 內，<span> 使用 onlick 呼叫 demoFunc() −

<body onload="start()">
   <div id="mydiv" style="background:orange;">
      <span id="myspan" onclick="demoFunc()">One</span>
   </div>
</body>

示例

現在讓我們來看完整的示例，將文字附加到 innerHTML −

<!DOCTYPE html>
<html>
<head>
   <title>Example</title>
</head>
<body onload="start()">
   <div id="mydiv" style="background:orange;">
      <span id="myspan" onclick="demoFunc()">One</span>
   </div>
</body>
<script>
   function start() {
      mydiv.innerHTML += "Two";
   }
   function demoFunc() {
      alert("Hello");
   }
</script>
</html>