如何使用 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>