如何使用 JavaScript 在不破坏子元素事件监听器的情况下将内容附加到 innerHTML?

htmlweb developmentfront end technology更新于 2024/7/25 18:20:17

是的，可以在不破坏子元素事件监听器的情况下将内容附加到 innerHTML。让我们看一个例子。首先，我们将使用 JavaScript 创建两个函数。以下是 demoFunc() 函数 -

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

上面的 demoFunc() 函数将显示一个警告框和一条消息。这样，start() 函数会在您加载网页时加载，并在 div 中显示"Two"和"One"。以下是 start() 函数。我们使用 innerHTML 属性将 div 中的文本"One"附加到文本"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>