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。