Why are commas inserted when innerHTML is copied after Postback?
<p>This case is going to sound complicated, but it's not that bad. The javascript at the end of this code <em>seems</em> to be sound.</p>

<p>EDIT: Here's the page running on a live server. The first example doesn't alternate between open and closed because I ripped out a lot of code in order to narrow the example down as much as I could.</p>

<p><a href="http://69.64.80.239/tmp/borked2.aspx" rel="nofollow">http://69.64.80.239/tmp/borked2.aspx</a></p>

<p>There are two cases listed in the following client code. The first case posts back when an imagebutton is clicked, and adds a call to the large javascript function, using the clientid of the imagebutton as the argument.</p>

<p>The second case simply uses an onClientClick, and executes the javascript without a postback.</p>

<p>Both methods accomplish the display and hiding of the textbox that should appear. However, with the postback method, commas are inserted every time you go back and forth - first 1 then 3 then 7 then 15 then 31. This odd behaviour does not occur with case #2, which makes me believe that the javascript in this case is sound.</p>

<p>When the postback occurs, a 'value=","' attribute appears in my textbox that was not there before. the increasing numbers of commas fit into the newly added attribute. </p>

<p>This case is extremely stripped down so as to highlight the problem effectively. Ultimately this is causing a detailsview I am performing the same copy on to add a comma to the beginning of every form value that it submits.</p>

<p>I'm completely stumped, so I'm just going to post the code as well as I can! Any ideas would be appreciated!</p>



<pre><code>&lt;h5&gt;CASE 1: Using Serverside postback to insert Javascript into a Literal&lt;/h5&gt;
&lt;table&gt;&lt;tr&gt;&lt;td&gt;

    &lt;asp:ImageButton id="CollapseExpand" runat="server" ImageUrl="/images/plus.gif" src="/images/plus.gif"
        AlternateText="Hide Tasks" Width="12" Height="12"  onclick="CollapseExpand_Click"
        /&gt;

     &lt;div style="display:none"&gt;
     &lt;asp:TextBox runat="server" ID="Textbox1"&gt;&lt;/asp:TextBox&gt;
     &lt;asp:Button runat="server" ID="btnSubmit1" Text="Submit 1" /&gt;
     &lt;/div&gt;

    &lt;asp:Literal runat="server" ID="ScriptAnchorTest"&gt;&lt;/asp:Literal&gt;     

&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>

<p>
    CASE 1 Codebehind</p>

<pre><code>protected void CollapseExpand_Click(object sender, ImageClickEventArgs e)
{

    Literal l = (Literal)this.ScriptAnchorTest;
    l.Text = "&lt;script type=\"text/javascript\"&gt;Expand(document.getElementById('" + this.CollapseExpand.ClientID + "'));&lt;/script&gt;";

}
</code></pre>

<p><br />
    CASE 2: Executing Javascript Clientside directly
    </p>

<pre><code>    &lt;asp:ImageButton id="CollapseExpand2" runat="server" src="/images/plus.gif" 
        AlternateText="Hide Tasks" Width="12" Height="12"  onClientClick="Expand(this); return false;"
        /&gt;

     &lt;div style="display:none"&gt;
     &lt;asp:TextBox runat="server" ID="TextBox2"&gt;&lt;/asp:TextBox&gt;
     &lt;asp:Button runat="server" ID="btnSubmit2" Text="Submit 2" /&gt;
     &lt;/div&gt;

&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>

<p>
    // The Javascript Function
    function Expand(image, index) {
        // get the source of the image
        var src = image.getAttribute("src");</p>

<pre><code>    // if src is currently "plus.", then toggle it to "minus.png"    
    if (src.indexOf("plus") &gt; 0) {

        //  toggle the  image
        image.src = image.src.replace("plus", "minus");

        var tr = image.parentNode.parentNode;
        // Get a reference to the next row from where the image is
        var next_tr = tr.nextSibling;

        // Get a refernece to the &lt;tbody&gt; tag of the grid
        var tbody = tr.parentNode;

        // Get a reference to the image's column
        var td = image.parentNode;
        var detailnode

        //loop through the content of the image's column. if hidden div is found, get a reference
        for (var j = 0; j &lt; td.childNodes.length; j++) {
            if (td.childNodes[j].nodeType == 1) {
                if (td.childNodes[j].nodeName.toLowerCase() == 'div') {
                    detailnode = td.childNodes[j].cloneNode(true);
                }
            }
        }

        // Create a new table row for "Expand"  
        var newtr = document.createElement('tr');
        var newtd = document.createElement('td');
        var newfirsttd = newtd.cloneNode(true);

        /* insert an empty cell first */
        newtr.appendChild(newfirsttd);
        newtd.colSpan = 8;

        // insert the  hidden div's content  into the new row
        newtd.innerHTML = detailnode.innerHTML;


        newtr.appendChild(newtd);
        tbody.insertBefore(newtr, next_tr);

        tr.className = "selected";
    }


    else {
        image.src = src.replace("minus", "plus");
        var row = image.parentNode.parentNode;
        var rowsibling = row.nextSibling;
        var rowparent = row.parentNode;
        rowparent.removeChild(rowsibling);
    }
</code></pre>
