如何使用 JavaScript 和 createElement 添加带有事件的 HTML 元素？答案

【问题标题】：How do I add an HTML element with an event using JavaScript und createElement?如何使用 JavaScript 和 createElement 添加带有事件的 HTML 元素？
【发布时间】：2021-03-26 22:15:13
【问题描述】：

我想将一个事件传递给我使用 Javascript 部分创建的按钮元素。

var i = 0;
function add() {
  i++;
  let body = document.getElementById("body");
  let newBr = document.createElement("br");
  body.appendChild(newBr);
  document.getElementsByCla
  let newElement = document.createElement("button");
  newElement.innerHTML = "Button"+i;
  newElement.id = "button" +i;
  newElement.type = "button";
  body.appendChild(newElement);
}

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="addElement.js"></script>

    <title>AddElement</title>
  </head>
  <body id="body">
    <button type="button" onclick="add()" name="button">button</button>
  </body>
</html>

我想传递 newElement.onclick = "add()" 之类的事件。这可能吗？

【问题讨论】：

这是什么document.getElementsByCla？

标签： javascript html createelement

【解决方案1】：

将add 视为Javascript 中生成的按钮的点击处理程序有两种主要方式：

 newElement.onclick = add;

或

newElement.addEventListener("click", add);

确保在任何一种情况下都不要写add()，以防止尝试将调用add 的返回值添加为事件处理程序。在这两种情况下，add 函数都以单击事件对象作为参数调用。

如果在同一个元素上多次设置onclick，则替换之前的处理程序。如果addEventListener 被多次调用，则添加的每个侦听器都会被单独调用 - 尽管removeEventListener 提供了一种删除先前添加到元素的侦听器的方法。

HTML 解析器从表单的 HTML 源按钮创建一个函数

function( event) { add() }

其中“add()”来自按钮的 HTML onclick 属性值。如果您想将事件对象从 HTML 按钮传递给 add，您需要将其包含在调用中：

 <button type="button" onclick="add(event)" name="button">button</button>

请查阅MDN，了解有关事件处理程序的更多信息，以及addEventListener 和removeEventListener 的语法要求。为了将来参考，addEventListener 被广泛认为是在 JavaScript 中添加事件侦听器的首选方式。

【讨论】：

【解决方案2】：

这是一个简单的例子。运行下面的sn-p，看到点击第一个按钮后，新建了一个按钮。

function add() {
  var btn = document.createElement("BUTTON");
  btn.innerHTML = "New button";
  document.body.appendChild(btn);
}

&lt;button onclick="add()"&gt;Button&lt;/button&gt;

【讨论】：