[javascript] Clone node en diep clonen werkt niet goed in IE

[Apen-nootjes]

Ben bezig met een script waarbij ik een bepaalde node wil clonen. Hierna kijken of er binnen de gecloonde node een form zit op een bepaalde node, zo ja van het form de naam en id aanpassen. Leek me niet zo lastig en in FireFox is dit ook niet lastig

HTML code van node die gecloned wordt:

HTML:

<div id="login_window" style="display: none; padding-bottom: 30px;">
            <form method="POST" action="'.SCRIPT_ROOT.'?page=login&amp;query='.base64_encode($_SERVER['QUERY_STRING']).'" name="" id="submit">
            <h1>Login</h1>          
            <table>
                <tr>
                    <td>
                        Wachtwoord:&nbsp;
                    </td>
                    <td>
                        <input type="password" name="password">
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="hidden" name="submit_login"></td>
                </tr>
                <tr>
                    <td></td>
                    <td style="text-align: right;"><strong><a href="javascript: document.getElementById(\'submit_login_window\').submit();">Inloggen</a></strong></td>
                </tr>
            </table>
            </form>
        </div>

De relevante code in Javascript:

JavaScript:

function open_popup(windowname)
{
    var text = document.getElementById('popup_window_content');
    var content = document.getElementById(windowname);
    
    if(text.childNodes.length >= 1)
    {
        while(text.hasChildNodes())
        {
            text.removeChild(text.lastChild);
        }
    }
    
    var newNode = content.cloneNode(true);  
    if(!!document.all) newNode.innerHTML = content.innerHTML;
    
    if(newNode.childNodes[1].tagName == 'FORM')
    {
        newNode.childNodes[1].name='submit_'+windowname;
        newNode.childNodes[1].id='submit_'+windowname;
    }
    
    newNode.style.display = 'block';            
    text.appendChild(newNode);
        
    set_popup_background_size();
}

windowname is de naam van de div die aangeroepen wordt, bijvoorbeeld login_window.

Nu is het probleem dat ik in Internet Explorer de volgende foutmelding krijg:

code:

Fout: 'childNodes.1.tagName' is leeg of geen object

Nu lijkt het erop dat ondanks dat de node gecloned wordt deze niet meer helemaal in de DOM terecht komt waardoor hij niet geen childNodes ofzo meer heeft?

Heb al gezocht, kom het probleem wel vaker tegen maar eigenlijk zonder oplossing Iemand hier een oplossing ?

[BtM909]

Je doet eerst een clone, dan properties wijzigen en daarna appenden in IE? Good luck

Append eerst en doe dan je check; werkt dat wel?

[ Voor 9% gewijzigd door BtM909 op 17-04-2009 12:15 ]

[Apen-nootjes]

Ohw dat was ik vergeten te melden, dat had ik ook al geprobeerd, werkt ook niet

Goed..... Dit blijkt dus eigenlijk een heel simpele fout te zijn en heeft niets te maken met het clonen...

In FF wordt whitespace meegenomen in de telling van de childNodes waardoor ik controleerde op [1], in IE wordt whitespace niet meegeteld waardoor er gecontroleerd mag worden op node [0]. Voor lering en leedvermaak:

JavaScript:

function open_popup(windowname)
{
    var text = document.getElementById('popup_window_content');
    var content = document.getElementById(windowname);
    
    if(text.childNodes.length >= 1)
    {
        while(text.hasChildNodes())
        {
            text.removeChild(text.lastChild);
        }
    }
    
    var newNode = content.cloneNode(true);  
    if(!!document.all) newNode.innerHTML = content.innerHTML;
    
    text.appendChild(newNode);
    
    if(newNode.childNodes[0].tagName == 'FORM')
    {
        newNode.childNodes[0].name='submit_'+windowname;
        newNode.childNodes[0].id='submit_'+windowname;
    }
    else if(newNode.childNodes[1].tagName == 'FORM')
    {
        newNode.childNodes[1].name='submit_'+windowname;
        newNode.childNodes[1].id='submit_'+windowname;
    }
    
    newNode.style.display = 'block';    
        
    set_popup_background_size();
}

Niet de meest nette oplossing geloof ik

[ Voor 88% gewijzigd door Apen-nootjes op 17-04-2009 12:47 ]

[BtM909]

Ik bedacht me dat net ook toen ik onderweg was

Bij mij werkte het wel, omdat ik de hele test-case anders had gemaakt

Als dit werkt, dan kan je het net zo goed zo laten, maar handiger is om door je childNodes te gaan en alleen Element Nodes te checken:

Internet Explorer has a nonstandard quirk, where many of these APIs will skip white space text nodes that are generated, for example, by new line characters. Mozilla will not skip these, so sometimes you need to distinguish these nodes. Every node has a nodeType property specifying the node type. For example, an element node has type 1, while a text node has type 3 and a comment node is type 8. The best way to only process element nodes is to iterate over all child nodes and only process those with a nodeType of 1: