HierarchyRequestError al modificar DOM en la aplicación de Windows Metro

Question

Estoy construyendo una aplicación de Metro de Windows usando Javascript y HTML y se estrella con un HierarchyRequestError:

Exception was thrown but not handled in user code at line 11, column 9 in ms-appx://21706d2f-b81e-47ef-9ebb-37de36c7a258/js/default.js 
0x800a139e - JavaScript runtime error: HierarchyRequestError 

En la línea que lanza el error que estoy haciendo algunos simples manipulación del DOM y tratar de insertar un nodo que he creado en el documento:

function insertData(hnode) { 
    document.querySelector('#datanode').appendChild(hnode); 
} 

¿Por qué esto fallará con un error de este tipo?

Answer 1

Se genera un HierarchyRequestError cuando intenta insertar undefined, o algún otro valor no válido, en el DOM.

En la función en la pregunta, hnode es probablemente undefined, por ejemplo porque se llamó a insertData() sin parámetros.

Para depurar una situación como esta y averiguar qué llamada a insertData() es el problema, se puede usar un punto de interrupción condicional en Visual Studio. Si configura un punto de interrupción, haga clic derecho sobre él y elija "Condición ...". Una condición como hnode === undefined se puede utilizar para romper solo los casos interesantes.