¿Cómo inicializo FirstChild para no obtener "x.firstChild is null or not an object"?

Question

En mi JSP/HTML tengo esto:

<div id="exampleLabel"> </div> 

Luego, en mi sección javascript tengo una función llamada desde un onclick como esto;

function changeLabel(){ 
    exampleLabel.firstChild.nodeValue = 'LABEL HAS CHANGED'; 
} 

Esto funciona bien en Chrome, no hace nada en Firefox y en Internet Explorer aparece un error en la página diciendo

exampleLabel.firstChild es nulo o no un objeto.

Ok puedo considerar que no había firstChild lo que tratar de hacer firstChild.ANYTHING sería un NPE, incluso puedo entender que los otros navegadores no sólo inicializar ellos mismos como Chrome hace obviamente.

La pregunta es, ¿cómo la inicializo yo misma para que pueda ir al .nodeValue = "blahblah" en ella?

Answer 1

La razón por la que no funciona en IE es que a diferencia de todos los otros navegadores más importantes, no crea un espacio en blanco para los nodos de texto en el código HTML, por lo tanto, su <div> que sólo contiene un espacio no tiene nodos secundarios en ES DECIR. Sugiero agregar un nodo de texto manualmente, o cambiar uno existente.

Además, a menos que haya declarado exampleLabel en otro lugar, se basa en una característica no estándar y bastante repugnante de IE y Chrome que mapea identificadores de elementos DOM a propiedades del objeto global (es decir, puede consultar un elemento como variable por su ID). Esto no funciona en otros navegadores. Lo que debes hacer es usar document.getElementById().

function changeLabel(labelText) { 
    var exampleLabel = document.getElementById('exampleLabel'); 
    var child = exampleLabel.firstChild; 
    if (!child) { 
     child = document.createTextNode(''); 
     exampleLabel.appendChild(child); 
    } 
    child.nodeValue = labelText; 
} 

changeLabel('LABEL HAS CHANGED'); 

Answer 2

Crea un textNode y añádelo.

function changeLabel(){ 
    var textNode = exampleLabel.firstChild; 
    if (!textNode) { 
     textNode = document.createTextNode('foo'); 
     exampleLabel.appendChild(textNode); 
    } 
    textNode.nodeValue = 'LABEL HAS CHANGED'; 
}