JS DOM replaceChild第二次不工作

我寫了一些非常基本的JS來隱藏，操作或更改標籤標籤內的某些文本，這些文本是由某個（差）CMS爲響應更改而設置的特定名稱的子元素的子元素在選擇元素上。JS DOM replaceChild第二次不工作

明顯的選擇是使用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>

來源

2015-04-16 Simone Chiesi

任何控制檯日誌都可以在第二次運行時看到？ –

終於想通了這個問題：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]);

來源

2015-04-16 11:08:56

JS DOM replaceChild第二次不工作

回答

相關問題