javascript - 使用大型动态 DOM 树创建大型稳定的 Web 应用程序

Question

该项目的 DOM 树很大，必须动态创建节点。有两种方法:

1)将子元素作为字符串插入到父元素中，并让浏览器推断子元素，即

html:

<div id="parent"></div>

和 JavaScript:

str='<input type="text" id="child" size="30">';
documen.getElementById("parent").innerHTML=str;

2)让js创建 child ，即

parentElement=document.getElementById('parent');
childElement=document.createElement('input');
childElement.setAttribute('id','child');
parentElement.appendChild('childElement);

我一直在使用1，当树变得很大并且应用程序数据变得很大时，我开始出现非常奇怪的行为。比如说，

aValue="hi";
str='<input type="text" id="child" size="30" value='+aValue+'>';
documen.getElementById("parent").innerHTML=str;

结果将是一个包含 hi 的文本行输入元素，并向 DOM 树添加了一些元素，并将数据添加到应用程序数据中，突然间文本行将读取

+aValue+

假设在 chrome 调试器下，您会发现与上述结果没有因果关系。我尝试删除以前的 child 然后插入新的 child ，但没有效果。另外，我在 chrome、ff 和 opera 中也得到了同样的行为。因此，公共(public)核心浏览器 C++ 代码中的内存似乎已被损坏。

所以问题是:有没有人用大动态 DOM 树(1000 个节点的顺序)和大应用程序数据(许多 Megs 的顺序)开发了一个稳定的大 Web 应用程序(100k 行)。如果是这样，您到底使用了什么动态 DOM 节点创建方法。有关内存管理的任何其他提示将不胜感激。

Answer 1

您可能想要研究 jQuery，而不是使用所有这些额外的调用来构建 DOM。它使得动态创建和操作 DOM 数据变得非常容易，并且应该独立于浏览器。

这篇文章讨论了创建新元素: The preferred way of creating a new element with jQuery

这是 jQuery 的链接:https://jquery.com/