nextSibling返回null

Question

我收到一個錯誤，說明「this.nextSiblingElement.id爲空」，當我清楚地設置元素生成ID時。我承認我仍然可以使用一些工作。我只是好奇，nextSiblingElement的ID被返回爲null的原因是什麼。我確定前一個元素是在下拉菜單之前生成的，並且菜單位於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：

0123內唯一的（元素）節點

因此，this.nextElementSibling將爲null，並且在嘗試獲取其id屬性時發生異常。

我確保在下拉菜單之前生成了前一個元素，並且使用previousChild.appendChild將菜單放置在它之前。

不，appendChild總是在最後插入新節點 - 無論新父節點在DOM中的位置如何。如果要將元素插入特定位置，請使用insertBefore。