The Bull Og

Onine since 1994. Offline since 1976.

See also the archive

An individual post follows.

Everything was going smoothly with Firefox. I was using innerHTML and the new arguments that I shoved into the DOM were getting posted to the server, no problem. Then, I switched over to IE to test and discovered that the newly created arguments weren't showing up. Figuring it was a problem with IE, I inspected the DOM (by inserting a "return false;" statement in the form validator function.

Sure enough, the newly-created arguments were not getting appended to the DOM and therefore not posted to the server. I tried shoving the new arguments into the DOM but wound up getting this message:

Node cannot be inserted at the specified point in the hierarchy

Here's what I was trying to do (intentional space at beginning of input to prevent WordPress rendering as HTML):

newCell = '';
        
        var row = document.getElementById('my_table').getElementsByTagName('tr').childNodes[2];
        
        row.childNodes[i].innerHTML = newCell;

Figuring that the string-based method of creating an element was getting me anywhere, I tried to dynamically create and append the node:

cellContent = row.childNodes[i].innerHTML;

        var inputNode = document.createElement("input"); 

        inputNode.setAttribute('type', 'text');

        inputNode.setAttribute('id', 'my_new_input');
        inputNode.setAttribute('name', 'my_new_input');

        inputNode.setAttribute('value', cellContent);
        inputNode.setAttribute('class', row.childNodes[i].className);        
                                
        row.childNodes[i].replaceChild(inputNode, row.childNodes[i].firstChild);

(If name isn't being set properly for you, you may want to check out this explanation about unexpected name property/attribute behavior in IE.)