IE에서 자바 스크립트 제거/addChild 문제

Question

select 및 다른 컨트롤이있는 HTML 페이지가 있습니다. 두 번째 컨트롤의 형식을 첫 번째 컨트롤에서 선택한 값에 따라 동적으로 변경해야합니다.

이

<form name="myForm"> 
    <select name="tagName" 
     onChange="changeControl(document.myForm.customControl, document.myForm.tagName.value, getSelectedText(document.myForm.tagName));"> 
     <option value='F'>Create Input</option> 
     <option value='E'>Create Select</option> 
     <option value='M'>Create Multiple Select</option> 
     <option value='N'>Create Not Editable</option> 
     <option value='C'>Create Configuration Param</option> 
     <option value='D'>Create Date</option> 
     <option value='X'>Create Unknown</option> 
    </select> 

    <br> 
    <br> 

    <div> 
     <input type="hidden" name="customControl" /> 
    </div> 

자바 스크립트 함수는 기본적으로 기존 컨트롤을 제거하고 새로운 하나를 추가합니다 다음은 HTML 코드입니다. 현재 Firefox에서는 작동하지만 Internet Explorer에서는 작동하지 않습니다. 여기에 코드가 있습니다.

function changeControl(oldControl, valType, tagName) 
{ 
var newControl; 

var controlParent = oldControl.parentNode; 
var controlName = oldControl.name; 

controlParent.removeChild (oldControl); 

switch(valType) { 
    //IE does not allow name attr to be set later, 
    //so we must use name at creation time; 
    //this way of doing things breaks non-IE browsers 
    //TBD: surround it with try-catch block 
    case 'F': 
     //newControl = document.createElement('input'); //non-IE 
     newControl = document.createElement('input name=' + controlName); 
     newControl.size = 30; 
    break; 

    case 'E': 
    case 'M': 
     newControl = document.createElement('select name=' + controlName); 
     if (valType == 'M') 
      newControl.multiple = "multiple"; 

     var optionStr = sampleArr[tagName]; 
     optionArr = optionStr.split(';'); 

     var optCount = 0; 
     for (i in optionArr) { 
      option = optionArr[i]; 
      newControl.options[i] = new Option(option, option); 
     } 
    break; 

    case 'N': 
    ...  

    default: 
     //unrecognized type 
     newControl = document.createElement('input name=' + controlName); 
     newControl.value = "Unrecognized control type"; 
     newControl.size = 30; 
     newControl.style.border = "0px"; 
     newControl.disabled = "disabled"; 
     //newControl.readonly = "readonly"; 
} 


//newControl.name = controlName; //non-IE 
controlParent.appendChild (newControl); 
} 

function getSelectedText(selectObj) 
{ 
    return selectObj.options[selectObj.selectedIndex].text; 
} 

changeControl에 대한 두 번째 호출에서 oldControl은 모든 특성을 잃은 것으로 보입니다. IE에서 name 속성을 동적으로 설정하려고하는 마지막 변경 사항을 확인하십시오.

왜이 부분이 고장 났는지 알 수 있습니까?

Answer 1

FYI, 나는 이름 대신 ID를 사용하여 문제를 해결했습니다. 기능은 다음과 같습니다.

function changeControl(controlId, valType, tagName) 
{ 
    var oldControl, newControl; 

    oldControl = document.getElementById(controlLabel); 
    ... 

    newControl.id = controlLabel; 
    controlParent.appendChild (newControl); 
} 

Answer 2

저는 대변인 인 jQuery입니다. 이 코드를 사용하면 코드에 눈에 띄지 않고 자바 스크립트 및 코드 단순화가 가능합니다 (무료로 크로스 브라우저 호환성을가집니다).

예를 들어, 내가 사용하여 제어 대상의 부모를 선택할 수 있습니다

var parent = $(control).parent(); 

을 다음 날 쓸 수 있습니다 replaceWith

라는 사랑스러운 COMAND가 :

parent.replaceWith("<input type='text' />"); 

가

이 한 줄은 요소의 전체 내용을 원하는 내용으로 바꿉니다.