使用 Java 脚本更新 DOM 项列表的方法
the way to update a list of dom item with java script?
我是这个网站的多合一开发者。在该站点中,如果您单击图形上的任何节点,它将更新结果div 的内容。我以愚蠢的方式这样做,我只是从头开始重写所有div 内容。我确信这不是最好的方法,那么您对这种动态更新有什么建议?
我认为会有一种方法将结果(可能是他们的 id)和结果的div 的 id 匹配,这样我就可以将所有这些代码片段div 保存在带有这些 id 的数组中。然后,当我需要更新时,我只是再次重新访问所有内容,但只是推送与结果匹配的 dom 对象。
是否也可以将 dom 对象保留在div 中并在需要时将它们推送到页面正文?
还是其他成功的方式?
只需隐藏与图形中单击的节点不匹配的div。这样,当他们单击重置时,您会显示所有div,而无需继续重新创建内容。
您可以将所有div 放在文档中并最初隐藏它们。将单个节点的所有div ID 保留在数组或某种对象中。
单击节点时,将与单击的节点对应的div 插入到目标div 中,并将它们设置为可见。
这种方法的一个问题是:即使是隐藏的div 也是 DOM 树的一部分,当您将选定的div 插入目标div 时,这些div 实际上已从原始 DOM 节点移动到新节点。这样,当用户再次单击同一节点时,这些div 将不再存在。
解决此问题的一种方法是先克隆节点并将克隆的节点移动到目标位置,或者最好先将它们放回原处以避免在使用新div 更新目标之前悬空节点。
相关文章:
- 在Javascript中,当使用array.prush方法向列表中添加项目时,如何对其进行排序
- 什么'是从对象列表中一次编辑一个对象的正确Angular/Firebase方法
- 在带有参数列表的表单submit上调用一个方法
- 从填充了 AJAX 的下拉列表中获取控制器的操作方法中的值
- 如何将对象列表传递到MVC4中的控制器方法
- 什么'这是ES6中制作重复元素列表的等效方法
- javascript:更改应用到的数组的数组方法列表
- 未捕获的类型错误:对象#<节点列表>没有方法'addEventListener'
- jQuery验证插件-比较两个选择下拉列表的自定义方法
- 来自Jquery的“.on”方法在动态生成的下拉列表后不起作用
- 有没有一种方法可以在使用html脚本的同时将列表实现为按钮函数
- 有没有一种方法可以在没有jQuery的情况下获得JavaScript中当前添加到后台的事件列表
- 调用.ajax方法得到未定义的json结果,返回json格式列表<字符串>
- 如何将带有数组列表的$(“form”).serialize()从AJAX方法传递到mvc控制器
- 如何使用ajax调用获取数组列表数据(将数组列表数据控制器传递给ajax方法)
- 级联下拉列表mvc3,create方法
- 在调用方法来填充详细信息网格之前,如何从填充的下拉列表中获取信息
- 调用 HTTP get 方法以使用 angular JS 在下拉列表中填充结果
- 如何将 hasNext() 和 hasPrevious() 方法用于 Node 的“智能列表”链表模块
- IE 列表方法的替代方法