用javascript更新dom项目列表的方法?

时间:2012-05-16 18:27:15

标签: javascript web-applications

我是this site的一位开发人员。在该站点中,如果单击图形上的任何节点,它将更新结果div的内容。我是以愚蠢的方式做到这一点,我只是从头开始重写所有的div内容。我确信这不是最好的方式,所以你会建议什么样的动态更新?

我认为有一种方法可以匹配结果(可能是他们的id)和结果的div的id,这样我就可以将所有这些片段div保存在带有这些id的数组中。然后,当我需要更新时,我只是再次重写所有内容,但只是推送与结果匹配的dom对象。

是否也可以将dom对象保留在div中,并在需要时将它们推到页面主体上?

还是以其他方式取得成功呢?

2 个答案:

答案 0 :(得分:1)

只需隐藏与图表中单击的节点不匹配的div。这样,当他们点击重置时,您将显示所有div,无需继续重新创建内容。

答案 1 :(得分:1)

您可以将所有div放在文档中并最初隐藏它们。将单个节点的所有div id保留在数组中或者某种对象中。

单击某个节点时,将与所单击节点对应的div插入目标div并将其设置为可见。

这种方法的一个问题是:即使隐藏的div也是DOM树的一部分,当您将选择的div插入目标div时,这些div实际上是从原始DOM节点移动到新节点。这样,当用户再次单击同一节点时,这些div不再存在。

解决此问题的一种方法是首先克隆节点并将克隆的节点移动到目标位置,或者最好先将它们放回去,以避免在使用新div更新目标之前悬空节点。