Javascript JS如何更新列表项

我想根据在第一个列表中单击的项目更新第二个列表：

因此，我要做的是在执行请求并添加新元素的第一个列表的链接的

onclick

属性上启动一个函数。 问题是，每次我单击不同的元素时，新元素都会添加到旧元素中，而不是替换它们，这很正常，因为我使用了

createElement

因此，我尝试在加载新代码（注释代码）之前删除旧代码，但没有成功：/

函数catalogRequest（）{
var http=new XMLHttpRequest（）；
http.onreadystatechange=function（）{this.readyState，status，this.responseText}；
http.open（'GET'，'http://localhost:31000/catalog');
http.send（）；
http.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
loadCatalog（this.responseText）；
}
};
}
函数加载目录（分类文本）{
让categories=JSON.parse（categoriesText）；
控制台日志（类别）；
categories.forEach（元素=>{
让panel=document.getElementById（'catalog'）；
让panelLink=document.createElement（'a'）；
panelLink.className='panel block'；
panelLink.onclick=function（）{categoryRequest（元素['id']）；}；
panelLink.text=元素['name']；
panel.appendChild（panelLink）；
});    
}
函数类别请求（id）{
//在加载新链接之前，请删除旧链接
//让oldLinks=document.getElementsByClassName（'category-link'）；
//console.log（oldLinks）；
//对于（让旧链接项）{
//文件.删除儿童（项目）；
// }
var http=new XMLHttpRequest（）；
http.onreadystatechange=function（）{this.readyState，status，this.responseText}；
http.open（'GET'，'http://localhost:32000/list?id=“+id）；
http.send（）；
http.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
loadCategories（this.responseText）；
}
};
}
函数加载类别（productsText）{
让products=JSON.parse（productsText）；
控制台日志（产品）；
products.forEach（元素=>{
let panel=document.getElementById（'category'）；
让panelLink=document.createElement（'a'）；
panelLink.className='面板块类别链接'；
panelLink.onclick=categoryRequest（元素['id']）；
panelLink.text=元素['name']；
panel.appendChild（panelLink）；
});    
}

目录

类别

插入前的空类别列表：

function loadCategories(productsText){
    let products = JSON.parse(productsText);
    console.log(products);
    let panel = document.getElementById('category');
    panel.innerHTML = "";
    products.forEach(element => {
        let panelLink = document.createElement('a');
        panelLink.className = 'panel-block category-link';
        panelLink.onclick = categoryRequest(element['id']);
        panelLink.text = element['name'];
        panel.appendChild(panelLink);  
    });    
}

---

插入前的空类别列表：

function loadCategories(productsText){
    let products = JSON.parse(productsText);
    console.log(products);
    let panel = document.getElementById('category');
    panel.innerHTML = "";
    products.forEach(element => {
        let panelLink = document.createElement('a');
        panelLink.className = 'panel-block category-link';
        panelLink.onclick = categoryRequest(element['id']);
        panelLink.text = element['name'];
        panel.appendChild(panelLink);  
    });    
}

---

项

不是

文档

的直接子项。调用类别面板上的

item.remove（）

或只调用

.innerHTML=”“

，item不是

文档的直接子项。调用类别面板上的
item.remove（）
或只调用
.innerHTML=”“
，替换
panel.innerHTML=“”panel.innerHTML=“
类别”
替换
panel.innerHTML=“”带有
panel.innerHTML=“
类别”
“