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

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

javascript php jquery html css

使用Javascript DOM删除HTML中的无序列表,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,基本上，我需要执行的任务是使用removeChild（）函数删除整个“代理”数组，但根据我所阅读的[here][1]，它需要id。之后，我需要用“freshagent”数组替换“agent”数组，并将其显示在无序列表中我的问题是无法设置“ul”的id，因为我使用了createElement（）函数。因此，我无法删除“代理”数组 //旧代码 <!DOCTYPE html> <html> <head> </head> &l

基本上，我需要执行的任务是使用

removeChild（）

函数删除整个“代理”数组，但根据我所阅读的[here][1]，它需要

id。之后，我需要用“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>


var代理=[
“迪翁”，
“Elisa”，
“赛琳娜”，
“Shauna”，
“罗杰”
];
var freshAgents=[
“灰色”，
“希瓦尼”，
“布莱恩”，
“杰森”，
“FChad”
];
var i=0；
var ul=document.createElement（'ul'）；
ul.设置属性（“id”、“列表”）；
适用于（代理中的i）{
var list=document.createElement（'li'）；
var节点=document.createTextNode（代理[i]）；
list.appendChild（节点）；
ul.儿童（名单）；
}
rList=document.getElementById（“列表”）；
if（rList.hasChildNodes（））{
适用于（代理中的i）{
rList.removeChild（rList.childNodes[i]）；
}
}
var finalList=agents.concat（freshAgents）；
对于（我在finalList）{
var list=document.createElement（'li'）；
list.appendChild（document.createTextNode（finalList[i]）；
ul.儿童（名单）；
}
document.getElementById（“包装器”）.appendChild（ul）；

//新代码（工作）


var试剂=[“迪翁”、“Elisa”、“赛琳娜”、“肖纳”、“罗杰”]；
var freshAgents=[“Gray”、“Shivani”、“Branne”、“Jason”、“FChad”]；
var i=0；
var ul=document.createElement（'ul'）；
适用于（代理中的i）{
var list=document.createElement（'li'）；
var节点=document.createTextNode（代理[i]）；
list.appendChild（节点）；
ul.儿童（名单）；
}
var rList=document.getElementById（“包装器”）.appendChild（ul）；
做{
rList.removeChild（rList.childNodes[0]）；
}while（rList.hasChildNodes（））
对于（我在freshAgents）{
var list=document.createElement（'li'）；
list.appendChild（document.createTextNode（freshAgents[i]）；
ul.儿童（名单）；
}

我不能真正理解你的问题，但基于此

问题：我无法为“ul”设置id，因为使用了createelement函数。我无法删除“代理”数组

我假设您想向使用

document.createElement（）

创建的元素添加

id

。您可以这样做：

var el = document.createElement('div');
el.id = 'exampleID';

首先，请以整洁易读的方式输入您的代码，以便每个人都能阅读。我已将您的代码格式化为以下格式：

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);

另一个提示：由于您引用的是HTML，建议您也提供该代码。再说一次，这不是必要的，只是礼节而已

关于设置

id

，请使用：

var example = document.createElement('ul');
example.id = 'example_ID';

看来你要走很长的路了。我对您的代码进行了一些调整，使其符合我认为您的要求。我会做一些不同的事情，但从你的问题看来，这是你想要的方式

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);
}

var试剂=[“迪翁”、“Elisa”、“赛琳娜”、“肖纳”、“罗杰”]；
var freshAgents=[“Gray”、“Shivani”、“Branne”、“Jason”、“FChad”]；
var ul=document.createElement（'ul'）；
ul.id=“aList”//给它一个身份证
对于（var i=0；i…节点
对于（var i=0；i


工作小提琴
粘贴库中有HTML，它只是一个简单的@EvanKennedy粘贴库链接是在我开始写这个答案后添加的，所以我没有看到。谢谢！：）非常感谢，我是stackflow的新手，需要找些时间来解决这个问题，顺便说一下，我还有另一个问题，现在我可以设置id了，但是ul是null，弹出的错误是无法读取null的属性“hasChildNodes”。是因为使用了create element吗？@ZiSean如果此解决方案对您有效，请确认并标记它好吗？感谢@user6003859编辑我的代码我对代码做了一些修改。但我还是不明白为什么它会起作用？有人能解释吗。
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);
}