JS DOM replaceChild第二次没有工作

Question

我已经编写了一些非常基本的JS来隐藏，操作或更改标签标签内的一些文本，这些标签是某些div的子代，具有由（差）CMS设置的特定名称以响应select元素的更改。

显而易见的选择是使用DOM，但是一旦标签发生变化，一旦它不再发生变化，我就会感到茫然。 这是JS：

campi=["nome","avv_cat","ogg","dat_pub","dat_scad","scad_perm","ur","info","mod_pres","target"]
   for (i=0;i<campi.length;i++){
     document.getElementById("layer_".concat(campi[i])).style.display="block";
   }
   var sel= document.getElementById("avv_cat").value;
  switch (sel) {
    case "altr":
      ecc=[];
      camb=["mod_pres","target"];
      testi=["Modalità presentazione domanda:","A chi è rivolto?"];
      break;
    case "cimit":
        ecc=["mod_pres","target"];
        camb=[];
        testi=[];
    break;
    case "cont":
        ecc=[];
        camb=["mod_pres"];
        testi=["Scadenza e modalità presentazione domande"];
    break;
    case 'conser':
        ecc=["dat_scad","scad_perm"];
        camb=["target","mod_pres"];
        testi=["Sono invitati:","Data e luogo della conferenza:"];
    break;
    case 'manint':
        ecc=["target"];
        camb=["mod_pres"];
        testi=["Scadenza e modalità presentazione domande"];
    break;
  }
  for (i=0;i<ecc.length;i++){
    document.getElementById("layer_".concat(ecc[i])).style.display="none";
  }
  //Ciclo per cambiare etichetta
  for (i=0;i<camb.length;i++){
    //Crea il nuovo nodo nel DOM
    alert("tr");
    var lay=document.getElementById("layer_".concat(camb[i]));
    var txt= document.createTextNode(testi[i]);
    //Rimpiazza
    lay.replaceChild(txt, lay.getElementsByTagName("LABEL")[0]);
  }

这是div的HTML和有关的选择：

<div id="layer_nome"><label for="nome"><strong>(*)</strong> Titolo avviso(*): </label> <input  class="stileForm"  type="text" name="nome" id="nome" value="" /></div> 
<div id="layer_avv_cat"><label for="avv_cat"><strong>(*)</strong> Categoria(*): </label> <select  class="stileForm"   id="avv_cat" name="avv_cat"><option value="altr" selected="selected">Altro</option><option value="cimit">Cimiteriale</option><option value="cont">Contributi</option><option value="conser">Conferenza di Servizi</option><option value="manint
">Manifestazione di Interesse</option></select></div> 
<script type="text/javascript"> addEvent(document.getElementById('avv_cat'), 'change',     function() { /* Note this is the same code as above 
ecc contiente i campi da nascondere
 camb contiene i campi a cui cambiare etichetta
 testi contiente i testi con cui sostituire le etichette
 La non-dichiarazione degli array dentro lo switch
 è voluta per rendere le variabili automaticamente globali tramite hoisting
 Campi:
 nome,avv_cat,ogg,dat_pub,dat_scad,scad_perm,"ur","info"||"mod_pres","target"*/
 campi=["nome","avv_cat","ogg","dat_pub","dat_scad","scad_perm","ur","info","mod_pres","target"]
 for (i=0;i<campi.length;i++){
   document.getElementById("layer_".concat(campi[i])).style.display="block";
 }
 var sel= document.getElementById("avv_cat").value;
switch (sel) {
    case "altr":
    ecc=[];
    camb=["mod_pres","target"];
    testi=["Modalità presentazione domanda:","A chi è rivolto?"];
    break;
    case "cimit":
        ecc=["mod_pres","target"];
        camb=[];
        testi=[];
    break;
    case "cont":
        ecc=[];
        camb=["mod_pres"];
        testi=["Scadenza e modalità presentazione domande"];
    break;
    case 'conser':
        ecc=["dat_scad","scad_perm"];
        camb=["target","mod_pres"];
        testi=["Sono invitati:","Data e luogo della conferenza:"];
    break;
    case 'manint':
        ecc=["target"];
        camb=["mod_pres"];
        testi=["Scadenza e modalità presentazione domande"];
    break;
}
for (i=0;i<ecc.length;i++){
  document.getElementById("layer_".concat(ecc[i])).style.display="none";
}
//Ciclo per cambiare etichetta
for (i=0;i<camb.length;i++){
    //Crea il nuovo nodo nel DOM
  alert("tr");
    var lay=document.getElementById("layer_".concat(camb[i]));
    var txt= document.createTextNode(testi[i]);
    //Rimpiazza
    lay.replaceChild(txt, lay.getElementsByTagName("LABEL")[0]);
}
 }  ); </script><div id="layer_ogg"><label for="ogg">Oggetto Avviso: </label> <textarea name="ogg" id="ogg" style="display:block" rows="16" cols="20" wrap="off"></textarea><script language="JavaScript">CKEDITOR.stylesSet.add('stili_editor',[{ name: 'Allineamento del testo a destra' , element: 'span', attributes: { 'class': 'classEditor37' } } ,{ name: 'Allineamento del testo a sinistra' , element: 'span', attributes: { 'class': 'classEditor38' } } ,{ name: 'Allineamento del testo al centro' , element: 'span', attributes: { 'class': 'classEditor39' } } ,{ name: 'Carattere più piccolo - txtsmall' , element: 'span', attributes: { 'class': 'classEditor40' } } ,{ name: 'Carattere più piccolo rosso - txtsmall1' , element: 'span', attributes: { 'class': 'classEditor41' } } ,{ name: 'Carattere più grande e grassetto - txtbig' , element: 'span', attributes: { 'class': 'classEditor42' } } ,{ name: 'Carattere più grande e grassetto rosso - txtbig1' , element: 'span', attributes: { 'class': 'classEditor43' } } ,{ name: 'Carattere blu - txtblu' , element: 'span', attributes: { 'class': 'classEditor47' } } ,{ name: 'Carattere blu più grande e corsivo - txtblu2' , element: 'span', attributes: { 'class': 'classEditor48' } } ,{ name: 'Carattere rosso - txtrosso' , element: 'span', attributes: { 'class': 'classEditor49' } } ,{ name: 'Carattere verde - txtverde' , element: 'span', attributes: { 'class': 'classEditor50' } } ,{ name: 'Carattere verde grassetto - txtverdebig' , element: 'span', attributes: { 'class': 'classEditor51' } } ,{ name: 'Carattere più grande e grassetto nero - txtbig2' , element: 'span', attributes: { 'class': 'classEditor52' } } ,{ name: 'Immagine a sinistra' , element: 'img', attributes: { style: 'padding: 5px; margin-right: 10px; float:left;display:inline;border: 0px solid #000000;position:relative;' } } ,{ name: 'Immagine a destra' , element: 'img', attributes: { style: 'padding: 5px; margin-left: 10px; float:right;display:inline;border: 0px solid #000000;position:relative;' } } ,{ name: 'Immagine con bordo nero' , element: 'img', attributes: { style: 'border: 1px solid #000000;' } } ,{ name: 'Immagine senza bordo' , element: 'img', attributes: { style: 'border: 0px solid #000000;' } } ,{ name: 'Tabella generica' , element: 'table', attributes: { 'class': 'elementoTabella' } }]);CKEDITOR.replace( 'ogg', {server_url: 'http://srv-isweb.comune.prato.it/trasparenzaprato/',skin : 'moonocolor',bodyClass : 'oggetto0',contentsCss: 'http://srv-isweb.comune.prato.it/trasparenzaprato/editor/fckeditor/editor/css/fck_editorarea.php?id_stile=0&id_editor=25',format_tags: 'p;div;address;h2;h3;h4;h5;h6',toolbar: 'Advanced'
                , forcePasteAsPlainText:  false 
                });</script></div> 
<div id="layer_dat_pub"><label for="dat_pub">Data Pubblicazione: </label> <div style="display:inline;"><div style="display:inline;position:static;"><input  class="stileForm" style="width:66px;display:inline;" type="text" name="dat_pubdata" id="dat_pubdata" value="16/04/2015" onkeyup="updateData(document.getElementById('dat_pub'),this);" /></div></div><input type="hidden" name="dat_pub" id="dat_pub" value="1429142400" /><script type="text/javascript">new tcal ({'controlname': 'dat_pubdata'}, null, 'dat_pub');</script></div> 
<div id="layer_dat_scad"><label for="dat_scad">Data Scadenza: </label> <div style="display:inline;"><div style="display:inline;position:static;"><input  class="stileForm" style="width:66px;display:inline;" type="text" name="dat_scaddata" id="dat_scaddata" value="16/04/2015" onkeyup="updateData(document.getElementById('dat_scad'),this);" /></div></div><input type="hidden" name="dat_scad" id="dat_scad" value="1429142400" /><script type="text/javascript">new tcal ({'controlname': 'dat_scaddata'}, null, 'dat_scad');</script></div> 
<div id="layer_scad_perm"><label for="scad_perm">Senza scadenza? : </label> <input style="width:auto;border:none;"   class="stileForm" type="checkbox" id="scad_perm" name="scad_perm" value="1" /></div> 
<div id="layer_mod_pres"><label for="mod_pres">Modalità presentazione: </label> <textarea name="mod_pres" id="mod_pres" style="display:block" rows="16" cols="20" wrap="off"></textarea><script language="JavaScript">CKEDITOR.replace( 'mod_pres', {server_url: 'http://srv-isweb.comune.prato.it/trasparenzaprato/',skin : 'moonocolor',bodyClass : 'oggetto0',contentsCss: 'http://srv-isweb.comune.prato.it/trasparenzaprato/editor/fckeditor/editor/css/fck_editorarea.php?id_stile=0&id_editor=25',format_tags: 'p;div;address;h2;h3;h4;h5;h6',toolbar: 'Advanced'
                , forcePasteAsPlainText:  false 
                });</script></div> 
<div id="layer_target"><label for="target">L'avviso e' rivolto a: </label> <textarea name="target" id="target" style="display:block" rows="16" cols="20" wrap="off"></textarea><script language="JavaScript">CKEDITOR.replace( 'target', {server_url: 'http://srv-isweb.comune.prato.it/trasparenzaprato/',skin : 'moonocolor',bodyClass : 'oggetto0',contentsCss: 'http://srv-isweb.comune.prato.it/trasparenzaprato/editor/fckeditor/editor/css/fck_editorarea.php?id_stile=0&id_editor=25',format_tags: 'p;div;address;h2;h3;h4;h5;h6',toolbar: 'Advanced'
                , forcePasteAsPlainText:  false 
                });</script></div> 
<div id="layer_info"><label for="info">Per informazioni: </label> <textarea name="info" id="info" style="display:block" rows="16" cols="20" wrap="off"></textarea><script language="JavaScript">CKEDITOR.replace( 'info', {server_url: 'http://srv-isweb.comune.prato.it/trasparenzaprato/',skin : 'moonocolor',bodyClass : 'oggetto0',contentsCss: 'http://srv-isweb.comune.prato.it/trasparenzaprato/editor/fckeditor/editor/css/fck_editorarea.php?id_stile=0&id_editor=25',format_tags: 'p;div;address;h2;h3;h4;h5;h6',toolbar: 'Advanced'
                , forcePasteAsPlainText:  false 
                });</script></div> 
<div id="layer_ur"><label for="ur">Ufficio Responsabile: </label> <script type="text/javascript">
function oggettoSceltour(valore,nome) {
    var oggettoId = document.getElementById('ur');
    oggettoId.value = valore; 
    var oggettoNome = document.getElementById('urnome');
    oggettoNome.value = nome; 
    navigazione.close();
    ;
}
function sceltaOggettour() {
    navigazione = window.open('http://srv-isweb.comune.prato.it/trasparenzaprato/navigazione_oggetti.php?id=10&campo=ur&tipo_sel=singola','','width=980,height=700,toolbar=no,scrollbars=yes,status=yes');

        if(window.focus){
            navigazione.focus();
        }
}
function refreshCampour(valore,nome) {
    document.getElementById('ur').value = 0; 
    document.getElementById('urnome').value = 'Istanza da selezionare'; 
}
</script><input type="hidden" name="ur" id="ur" value="0" /><input type="text"  class="stileForm" disabled="disabled" name="urnome" id="urnome" value="Istanza da selezionare" style="width:50%;margin:0px 10px 0px 0px;" />
        <a class="bottoneClassico" title="Scegli un oggetto" href="javascript:sceltaOggettour();">
    <img src="http://srv-isweb.comune.prato.it/trasparenzaprato/grafica/admin_skin/classic/famiglia_oggetto.gif" alt="Scegli un oggetto" />Seleziona</a>   
        <a class="bottoneClassico" title="Cancella la selezione" href="javascript:refreshCampour();">
    <img src="http://srv-isweb.comune.prato.it/trasparenzaprato/grafica/admin_skin/classic/refresh.gif" alt="Cancella la selezione" />Reset</a>
</div> 
<script type="text/javascript">
                // funzione di aggiuta evento per campi a calcolo
                function webApplicationCalcoli(){ }aggiungiEventoWebApp(document.getElementById('nome'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('avv_cat'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('ogg'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('dat_pub'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('dat_scad'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('scad_perm'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('mod_pres'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('target'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('info'), 'change', webApplicationCalcoli); 

aggiungiEventoWebApp(document.getElementById('ur'), 'change', webApplicationCalcoli); 

</script>   

Answer 1

终于找到了问题：CMS的一个怪癖让它很难被发现，但它非常基本。 ReplaceChild用另一个节点替换节点：

var lay=document.getElementById("layer_".concat(camb[i])); var txt= document.createTextNode(testi[i]); //Rimpiazza lay.replaceChild(txt, lay.getElementsByTagName("LABEL")[0]);

在上面的代码中，将要替换的节点是txt，即定义的TextNode。因此，当代码第二次运行时，就没有标签元素了。解决方案显然是创建了一个合适的标签元素，将txt作为其子元素添加，并替换为这对元素。

var lay=document.getElementById("layer_".concat(camb[i]));
var nwlb=document.createElement("label");
var txt=document.createTextNode(testi[i]);
nwlb.appendChild(txt);
//Rimpiazza
lay.replaceChild(nwlb, lay.getElementsByTagName("label")[0]);