Javascript addEventListener在附加innerHTML后消失

好的，我使用javascript/greasemonkey将以下html添加到一个站点。 （仅示例）

你好
你好

我还为元素添加了一个点击事件监听器。 到目前为止，一切正常，单击元素时会触发click事件

但是。。。我在脚本中有另一个函数，它在特定条件下修改html， 即它附加了它，所以它看起来像：

<ul>
 <li><a id='abc'>Hello</a></li>
 <li><a id='xyz'>Hello</a></li>
 <li><a id='123'>Hello</a></li>
</ul>

你好
你好
你好

但当这完成后，它会破坏我为前两个元素添加的侦听器。。。 当我点击它们时，什么也不会发生

如果我注释掉了对进行追加的函数的调用，那么它将再次开始工作

---

请帮助…

每当您设置

innerHTML

属性时，您都会覆盖在此设置的任何以前的HTML。这包括串联赋值，因为

element.innerHTML += '<b>Hello</b>';

---

您还可以使用jQuery的“live”函数作为变体，您可以添加这样的html，而无需addEventListener：

<ul>
 <li><a id='abc' onclick='myFunc()'>Hello</a></li>
 <li><a id='xyz' onclick='myFunc()'>Hello</a></li>

 // The following add dynamically
 <li><a id='123' onclick='myFunc()'>Hello</a></li>
</ul>

你好
你好
//下面的代码将动态添加
你好

问题可能出在javascript中。你能把它粘贴到这里让我们看看发生了什么吗？附加新html的函数是：

var menu=pmgroot.getElementsByTagName（“ul”）[0]；menu.innerHTML+=（很长，所以我不想把它放在这里）

是的，很有魅力：）再次感谢Andy&Jage，非常感谢；）

element.innerHTML = element.innerHTML + '<b>Hello</b>';

var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl  = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);

<ul>
 <li><a id='abc' onclick='myFunc()'>Hello</a></li>
 <li><a id='xyz' onclick='myFunc()'>Hello</a></li>

 // The following add dynamically
 <li><a id='123' onclick='myFunc()'>Hello</a></li>
</ul>