Creating BIG stable web apps with BIG dynamic DOM Tree
<p>This project's DOM tree is big and nodes must be created dynamically. There are 2 ways:</p>

<p>1) insert child element in parent as string and let the browser infer the child, i.e.</p>

<p>html:</p>

<pre><code>&lt;div id="parent"&gt;&lt;/div&gt;
</code></pre>

<p>and javascript:</p>

<pre><code>str='&lt;input type="text" id="child" size="30"&gt;';
documen.getElementById("parent").innerHTML=str;
</code></pre>

<p>2) have js create the child, i.e.</p>

<pre><code>parentElement=document.getElementById('parent');
childElement=document.createElement('input');
childElement.setAttribute('id','child');
parentElement.appendChild('childElement);
</code></pre>

<p>I've been using 1, and started getting very strange behavior when the tree got BIG and the application data got BIG. Like, e.g.</p>

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

<p>The result would be a text line input element containing hi, and a few more added elements to DOM tree and data to app data, and all of a sudden the text line would read</p>

<pre><code>+aValue+
</code></pre>

<p>And say under chrome debugger you'd see no causal relationship with said result. 
I tried removing previous children then inserting new children, it had no effect.
Also, I get the same exact behavior in chrome, ff and opera. So it seems memory is getting corrupted in the common core browser c++ code.</p>

<p>So the question is: has anyone developed a stable BIG web app (order 100k lines) with BIG dynamic DOM Tree (order of 1000 nodes) and BIG app data (order of many Megs). If so, exactly what method of Dynamic DOM Node creation have you used.
Any other tips with regards to memory management would be appreciated.</p>