document.body.replaceChild报错的问题

[sxq129601]

代码是一个级联下拉菜单的案例，数值已正常获取到，但是在替换select时报错，已标注红色

IE11报错:
city.js:59 Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

HTML相关代码：
<select id="cityid" onchange="alert(this.value)">
<option value=-1>请选择</option>
</select>

相关JS代码：

// processReuqest方法作为回调方法
function processReuqest() {

if (xhs.readyState == 4) {
if (xhs.status == 200) {
// 创建新的select节点

var newSelect = document.createElement("select");
newSelect.id = "cityid";
// 为新创建的select节点添加onchange事件，以便测试用
newSelect.onchange = function test() {
// alert(this.value);
};
// 为新创建的select节点添加option节点
var op = document.createElement("option");
op.value = -1;
op.innerHTML = "请选择";
newSelect.appendChild(op);
// 得到完成请求后返回的字串符
var str = xhs.responseText;
// 根据返回的字符串为新创建的select节点添加option节点
var arr1 = str.split(",");

if (arr1.length == 1 && trim(arr1[0])== "" ) {
var child = document.createElement("option");
child.innerHTML = "未查到数据";
child.value = "未查到数据";
newSelect.appendChild(child);
} else {
for ( var i = 0; i < arr1.length; i++) {
var arr2 = arr1[i].split("=");
var child = document.createElement("option");
child.innerHTML = arr2[0];
child.value = arr2[0];
newSelect.appendChild(child);
}
}
// 用新select节点替换旧的select节点
var select = document.getElementById("cityid");
document.body.replaceChild(newSelect, select);
}
}
}

[天际的海浪]

select.parentNode.replaceChild(newSelect, select);

[sxq129601]

引用 1 楼 jslang 的回复:

select.parentNode.replaceChild(newSelect, select);

您好！后来我发现原因了，为什么加了form标签就会报错？例如： <form action=""> <select id="street" onchange="alert(this.value)"> <option value=-1>请选择</option> </select> </form> 去除form就可以了，但是我怎么加上form？

[天际的海浪]

引用 2 楼 sxq129601 的回复:

[quote=引用 1 楼 jslang 的回复:] select.parentNode.replaceChild(newSelect, select);

您好！后来我发现原因了，为什么加了form标签就会报错？例如： <form action=""> <select id="street" onchange="alert(this.value)"> <option value=-1>请选择</option> </select> </form> 去除form就可以了，但是我怎么加上form？[/quote] 加上form，select的父元素就是form了，就要由form元素调用replaceChild()方法。不能由body来调用了。 或者是先用select.parentNode来动态获取select的父元素 select.parentNode.replaceChild(newSelect, select);

[天际的海浪]

因为 replaceChild()被替换的必须是当前元素的直接子元素，不能是隔着一层的后代元素。

[sxq129601]

引用 3 楼 jslang 的回复:

[quote=引用 2 楼 sxq129601 的回复:] [quote=引用 1 楼 jslang 的回复:] select.parentNode.replaceChild(newSelect, select);

您好！后来我发现原因了，为什么加了form标签就会报错？例如： <form action=""> <select id="street" onchange="alert(this.value)"> <option value=-1>请选择</option> </select> </form> 去除form就可以了，但是我怎么加上form？[/quote] 加上form，select的父元素就是form了，就要由form元素调用replaceChild()方法。不能由body来调用了。 或者是先用select.parentNode来动态获取select的父元素 select.parentNode.replaceChild(newSelect, select); [/quote] 原来是这样多谢