nextSibling返回空

Question

当我在元素生成时为元素设置is时，我收到了一个错误，说"this.nextSiblingElement.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。