nextSibling返回null

Question

我收到一条错误，说“ this.nextSiblingElement.id为null ”，显然我已经为生成的元素设置了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中唯一的（元素）节点：

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

因此，this.nextElementSibling将为null，并且在尝试获取其id属性时会出现异常。

  

我确保在下拉菜单之前生成了前一个元素，并且使用previousChild.appendChild将菜单放在它之前。

不，appendChild总是在最后插入新节点 - 无论新父节点在DOM中的位置如何。如果要在特殊位置插入元素，请使用insertBefore。