ajax 加载后刷新 DOM 元素答案

【问题标题】：Refresh DOM elements after ajax loadajax 加载后刷新 DOM 元素
【发布时间】：2012-05-18 11:06:50
【问题描述】：

以下是我遇到的问题的简要说明：

我开始

<container>
    <div id="foo"></div>
</container>

然后我使用 Ajax 将内容加载到容器 div

<container>
    <div id="bar"></div>
</container>

然后重新加载原始文件

<container>
    <div id="foo"></div>
</container>

但是我不能再使用 javascript 定位 #foo，因为 javascript 认为它是一个新元素

实际代码显然要复杂得多，我需要在 ajax 加载后刷新整个 DOM，以便我可以使用之前存在的几个元素。

【问题讨论】：

所以您要从 dom 中分离 #foo 并稍后重新附加它？
你的javascript在哪里？当您呈现的只是 HTML 时，调试 javascript 有点困难。
“目标#foo”是什么意思？如果元素在 DOM 中，document.getElementById('foo') 肯定会起作用。
@Musa 是的，我正在用另一个页面替换容器的内容，然后将上一个页面重新加载回容器中
@James：完全是的。如果重新加载意味着您将容器的内容设置为 HTML，例如 container.innerHTML = '....';，那么是的，它将创建一个新元素。正如我所说，您可以使用getElementById 检索对新元素的引用，或者不将内容设置为HTML，而是将旧元素添加回DOM，例如container.appendChild(old_foo);，其中old_foo 是对@987654331 的引用@你已经有了。

标签： javascript ajax dom refresh

【解决方案1】：

（在 cmets 和问题编辑中回答的问题。转换为社区 wiki 答案。见 Question with no answers, but issue solved in the comments (or extended in chat)）

OP 写道：

问题出现是因为我正在创建一个对象，其中元素作为变量，所以当我再次调用该变量时，它所代表的实际元素不再存在，只是一个具有相同 id 的元素

已解决：

感谢 cmets 中 @felix 的建议，我意识到这样做的方法是获取存储在 object 变量中的元素的 id，并使用它来定位 ajax 加载内容中的新元素：

我从原始内容创建的对象变量：playlist.trackdiv，代表元素div#track1

当我稍后通过 ajax 加载 div 时，playlist.trackdiv 不再代表 div#track1，而是具有相同 ID 的元素的全新实例。解决方案是使用像 playlist.trackdiv.id 这样的对象的 id，然后使用它来定位新元素：document.getElementById(playlist.trackdiv.id)

【讨论】：