老师请看一下问题出在哪了
来源：9-5 编程练习
李李明明
2020-05-23 09:50:23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点练习</title>
</head>
<body>
<div id="wrap">
<ul id="list">
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</div>
<script>
//在此处补充代码
var ul=document.getElementById("list");
var replace1=document.createTextNode("HTML");
var replace2=document.createTextNode("CSS");
var replace3=document.createTextNode("HTML5");
var replace4=document.createTextNode("CSS3");
var li4=document.createElement("li");
li4.appendChild(replace4);
ul.appendChild(li4);
ul.replaceChild(replace1,ul.firstElementChild);
ul.replaceChild(replace2,ul.children[1]);
ul.replaceChild(replace3,ul.children[2]);
</script>
</body>
</html>
1回答
-
同学你好，因为replace1等是新创建的文本节点，而firstElementChild和children获取的子元素节点。当使用文本节点替换子元素节点后，后面获取的子元素节点就会发生改变。
示例：只替换一个元素，然后在替换之前和替换之后使用console.log输出测试下
所以说替换之后，ul.children[2]无法获取到对应的内容，会出现报错，导致无法实现效果。
建议：参考下图，使用循环创建li元素，将li添加到新创建的ul列表中，替换之前的ul元素。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题