nextSibling이 null을 반환 함

Question

요소가 생성 될 때 ID를 명확하게 설정하면 "this.nextSiblingElement.id가 null"이라는 오류가 발생합니다. 나는 여전히 인정할만한 작품을 사용할 수있다. null로 반환되는 nextSiblingElement의 ID가 원인인지 궁금했습니다. 이전 요소가 드롭 다운 메뉴 이전에 생성되었고 메뉴가 앞에 놓여 있는지 확인했습니다. previousChild.appendChild.

필요에 따라 코드를 편집 할 수 있지만 이해하기 위해 표시 할 코드를 잘 모르겠습니다. 다음과 같이 나는 단지 관련 기능을 보여주는 오전 :

//helper function to add elements to the form 
function createNewFormElement(inputForm, feildName, elementName, elementValue, elementType){ 

var inputString = String(feildName + ": <input name='" + elementName + "' type='" + elementType + "' /> "); 
var newElement = document.createElement('div'); 

newElement.style.display = 'inline'; 

if (feildName == "Quantity" && containerType != "Box/Bag"){ 
    newElement.style.visibility = 'hidden'; 
}else{ 
    newElement.style.visibility = 'visible'; 
} 
if (feildName == "Quantity"){ 
    newElement.id = "boxhide"+counter; 
}else{ 
    newElement.id = 'dynamicInput'; 
} 

newElement.innerHTML = inputString; 

newElement.value = elementValue; 
document.getElementById(inputForm.id).parentNode.appendChild(newElement); 

return newElement; 

} 

//helper function to add dropdown 
function createNewDropDown(inputForm, feildName, elementName){ 

    var dropDown, arValue; 
    var newElement = document.createElement('div'); 

    newElement.id = 'dynamicInput'; 
    newElement.style.display = 'inline'; 

    dropDown = "<option value='" + containerType + "' selected>" + containerType + "</option>"; 


    for (i=0; i<conArray.length; i++){ 
     arValue = conArray[i]; 
     dropDown = dropDown + "<option value='" + arValue + "'>" + arValue + "</option>"; 
    } 

    var inputString = String(feildName + ": <select onchange='switchMain(this.nextElementSibling.id);' name='" + elementName + "' id='" + elementName + "'>" + dropDown + "</select> "); 

    newElement.innerHTML = inputString; 
    document.getElementById(inputForm.id).parentNode.lastChild.previousSibling.appendChild(newElement); 

    return newElement; 
} 
function getStyle(divName){ 

var temp = document.getElementById(divName).style.visibility; 

return temp; 
} 

function switchMain(divName){ 

var e = document.getElementById("myContainers[]"); 
var strUser = e.options[e.selectedIndex].value; 

if (strUser == "Box/Bag"){ 

    var current = getStyle(divName); 

    //console.debug(current); 

    document.getElementById(divName).style.visibility = "visible"; 
}else{ 
    document.getElementById(divName).style.visibility = "hidden"; 
} 
} 

Answer 1

당신이있어 inputString 이제

"… <select onchange='switchMain(this.nextElementSibling.id);' …>…</select> " 

, 당신은

newElement.innerHTML = inputString; 

당신이 기대할 수 없다을 실행할 경우

같은 select 요소에는 형제 요소가 있습니다.이 요소는 newElement 내부의 유일한 요소 노드입니다.

<div …> … <select onchange='switchMain(this.nextElementSibling.id);' …>…</select> </div> 

따라서 this.nextElementSibling은 null이되며 id 속성을 얻으려고하면 예외가 발생합니다.

이전 요소가 드롭 다운 메뉴보다 먼저 생성되었고 메뉴가 previousChild.appendChild로 그 앞에 놓여 있는지 확인했습니다.

아니요, appendChild은 DOM의 새 부모 위치에 관계없이 항상 끝에 새 노드를 삽입합니다. 특정 위치에 요소를 삽입하려면 insertBefore을 사용하십시오.