gpt4 book ai didi

javascript - 使用 Javascript DOM 删除 HTML 中的无序列表

转载 作者:行者123 更新时间:2023-11-28 04:20:25 26 4
gpt4 key购买 nike

基本上,我需要执行的任务是使用 removeChild() 删除整个“agent”数组。功能,但它需要 <ul> id,根据我在 [此处][1] 阅读的内容。之后,我需要用“freshagent”数组替换“agent”数组,并将其显示在无序列表中。

我的问题是我无法为“ul”设置 ID,因为我使用了 createElement()功能。因此,我无法删除“代理”数组。

//旧代码

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="wrapper">
</div>
<script>
var agents = [
"Dion" ,
"Elisa" ,
"Selena" ,
"Shauna" ,
"Rodger"
];
var freshAgents = [
"Gray",
"Shivani",
"Brainne",
"Jason",
"FChad"
];
var i = 0;
var ul = document.createElement('ul');
ul.setAttribute("id","aList");
for (i in agents){
var list = document.createElement('li');
var node = document.createTextNode(agents[i]);
list.appendChild(node);
ul.appendChild(list);
}
rList = document.getElementById("aList");
if (rList.hasChildNodes()){
for(i in agents){
rList.removeChild(rList.childNodes[i]);
}
}

var finalList = agents.concat(freshAgents);

for (i in finalList){
var list = document.createElement('li');
list.appendChild(document.createTextNode(finalList[i]));
ul.appendChild(list);
}

document.getElementById("wrapper").appendChild(ul);
</script>
</body>
</html>

//新代码(工作)

<!DOCTYPE html>

<html>

<head>

</head>

<body>


<div id="wrapper">

</div>



<script>

var agents = ["Dion" ,"Elisa" , "Selena", "Shauna", "Rodger"];

var freshAgents = ["Gray", "Shivani", "Brainne", "Jason","FChad"];

var i = 0;

var ul = document.createElement('ul');


for (i in agents){

var list = document.createElement('li');

var node = document.createTextNode(agents[i]);

list.appendChild(node);

ul.appendChild(list);

}


var rList = document.getElementById("wrapper").appendChild(ul);


do{

rList.removeChild(rList.childNodes[0]);


}while(rList.hasChildNodes())



for (i in freshAgents){

var list = document.createElement('li');

list.appendChild(document.createTextNode(freshAgents[i]));

ul.appendChild(list);

}


</script>


</body>


</html>

最佳答案

看来您要走很长的路要走。我已经对您的代码进行了一些调整,以使其按照我认为您的要求进行操作。我会做一些不同的事情,但从你的问题中可以清楚地看出这就是你想要的方式。

var agents = ["Dion", "Elisa", "Selena", "Shauna", "Rodger"];
var freshAgents = ["Gray", "Shivani", "Brainne", "Jason", "FChad"];
var ul = document.createElement('ul');
ul.id = "aList";// give it an ID
for (var i = 0; i < agents.length; i++) {
var list = document.createElement('li');
var node = document.createTextNode(agents[i]);
list.appendChild(node);
ul.appendChild(list);
}
document.getElementById("wrapper")
.appendChild(ul);
rList = document.getElementById("aList");//this is the same as ul variable declared above
if (rList.hasChildNodes()) {
console.log(rList.childNodes);//lists the <LI>...<LI> nodes
for (var i = 0; i < rList.childNodes.length; i++) {//Loop through the nodes not your agent array
rList.removeChild(rList.childNodes[i]);
}
}
var finalList = agents.concat(freshAgents);
for (var i = 0; i < finalList.length; i++) {
var list = document.createElement('li');
list.appendChild(document.createTextNode(finalList[i]));
ul.appendChild(list);
}

工作 fiddle here

关于javascript - 使用 Javascript DOM 删除 HTML 中的无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42233313/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com