Javascript 修改容器的innerHTML属性时元素引用中断

在通过代码创建元素时，我遇到了一个问题，即修改元素的

innerHTML

属性会中断对在修改之前注入到已修改元素中的其他元素的任何引用

我在这里有一个测试用例：我希望

link1

引用的行为与

link2

完全相同

第二个测试用例是相同的代码，但是我没有使用

innerHTML

属性添加

标记，而是使用一个对象创建了换行符。此测试的行为符合预期：

---

我的问题不是关于这个特定的代码，而是它背后的概念：在第一个测试用例中，

link1

引用发生了什么？如果它没有引用当

cont

节点被注入文档时可见的HTML/DOM节点，那么它引用的是什么，以及它如何与javascript对象的ByReference特性相适应？

HTML在内部由DOM对象结构表示。有点像传统编程语言中的树类。如果设置innerHTML，则会销毁父节点中以前的节点，解析新的innerHTML，并创建新对象。参考文献不再相同

div
|-- a..

上面的div对象包含一个锚对象作为子对象。现在设置一个变量link1作为对该锚对象地址的引用。然后.innerHTML是

+=“
”

，这意味着删除div的所有节点，并根据.innerHTML新值的解析结果动态重新创建。现在，旧的引用不再有效，因为锚定标记被重新创建为新的对象实例。

这里的内容很少

首先。字符串是不可变的，因此执行

element.innerHTML+=“
”

作为完整的读取和重写

第二，为什么这样不好：

除了性能之外，mootools（以及jquery）还为所有引用的元素分配特殊的、唯一的顺序UID。您可以通过调用或创建元素上的选择器来引用元素

然后考虑特定的元素，如<代码> UID > 5。

uid

链接到一个名为

Storage

的特殊对象，该对象位于闭包后面（因此是私有的）。它有

uid

作为键

元素存储然后作用于

元素。存储（“键”，值”）

和

元素。检索（“键”）

最后，这一点很重要：

事件

被存储到元素存储中（例如，存储[5]['events']）-do-element.retrieve（“events”）并在fireBug中进行探索，如果您感兴趣的话

重写innerHTML时，旧元素将停止存在。然后重新创建该元素，但事件处理程序和对先前绑定的函数的引用将不再工作，因为它现在将获得一个新的

uid

就这样，希望它有意义

要添加br，只需执行

新元素（“br”）。改为注入（元素）

，或者为批次（最快）创建一个模板片段，并添加1个大区块，然后添加事件