Javascript创建类别超链接数组

我有一系列的运动项目。我试图从主数组中构建一个类别名称数组。然后将每个类别名称创建为超链接元素，onclick将触发加载关联产品的函数。我还需要显示类别名称的一个实例，因为有多个

当我单击按钮并调用filterCategory时，没有显示任何内容。我在Chrome Developer Tools中遇到的错误是调用：

document.getElementById("brand-category").appendChild(categoriesLink);

。。。这一行的错误是：

未能在“节点”上执行appendChild:参数1不是节点类型

以下是我迄今为止所尝试的：

var data = {
"Nike": [
    {
    "id": "1",
    "brand":"Nike",
    "productTitle": "Black Hoody",
    "productImage": "image.jpg",
    "category": "Hoodies",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "2",
    "brand":"Nike",
    "productTitle": "Running Jacket",
    "productImage": "image.jpg",
    "category": "Jackets",
    "priceBand": "1104", 
    "salePrice": "150.00"}
],

"Sketchers": [
    {
    "id": "3",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 1",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1103", 
    "salePrice": "120.00"},
     {
    "id": "4",
    "brand":"Sketchers",
    "productTitle": "Running Shoes Style 2",
    "productImage": "image.jpg",
    "category": "Running Shoes",
    "priceBand": "1102", 
    "salePrice": "90.00"}

]}  

function filterCategory() {
//build an array of unique category names from the main array.  
//create an element and assign the category name as a link
//on click, load the associated products from that category

var categories, categoriesLink;

for(categories in data) {
    categoriesLink = document.createElement("a");
    categoriesLink.innerHTML = categories;
    categoriesLink.categories_Arr=data[categories];
        categoriesLink = function() {
            var catsContainer=document.getElementById('brand-category');
            var categories_Arr=this.categories_Arr, i, I=categories_Arr.length, item;
            var catOutput="";
            for(i=0; i<I; I++) 
            {
                item=categories_Arr[i];
                 catOutput+= "<img src=\""+item.logo+"\"/>" +  item.id + item.productTitle + item.productDescription + "<img src=\""+item.productImage+"\"/>" + item.rrp + item.salePrice + "<br>";
             }

            catsContainer.innerHTML=catOutput;
            catsContainer.style.display="block";
            return false;
        }

        document.getElementById("brand-category").appendChild(categoriesLink);
    }
}

<div id='cat'><button id='filterCategory' name='filterCategory' value='Category' onclick="filterCategory();">Category</button></div>


<div id="brand-category"></div>

非常感谢您的帮助

---

干杯

categoriesLink=function，您试图在html中附加函数。这就是为什么抛出的错误参数1不是节点类型的原因。您可以更改函数名，或者如果需要，可以使用append来显示不好的整个函数。请参阅下面的代码片段

风险值数据={ 耐克：[ { id:1， 品牌：耐克， 产品名称：黑色连帽衫， productImage:image.jpg， 类别：连帽衫， 价格区间：1103， 售价：120.00}， { id:2， 品牌：耐克， 产品名称：运动夹克， productImage:image.jpg， 类别:夹克,， 价格区间：1104， 售价：150.00} ], 草图绘制者：[ { id:3， 品牌：Sketcher， 产品名称：跑鞋款式1， productImage:image.jpg， 类别:跑鞋,， 价格区间：1103， 售价：120.00}， { id:4， 品牌：Sketcher， 产品名称：跑鞋款式2， productImage:image.jpg， 类别:跑鞋,， 价格区间：1102， 售价：90.00} ]} 函数过滤器类别{ //从主数组生成唯一类别名称的数组。 //创建元素并将类别名称指定为链接 //单击后，从该类别加载关联产品 var类别，分类链接； 数据中的类别{ categoriesLink=document.createElementa； categoriesLink.innerHTML=类别； categoriesLink.setAttribute'href'； categoriesLink.categories_Arr=数据[类别]； var categoriesLinks=函数{ var catscocontainer=document.getElementById'brand-category'； var categories\u Arr=this.categories\u Arr，i，i=categories\u Arr.length，item； var catOutput=；

---

对于I=0；I您使用函数分配categoriesLink，可能是想将其分配为eventhandler？您将直接将函数分配给categoriesLink。如果我更改名称，则类别显示但不作为链接？谢谢sumit。这似乎解决了问题，但类别不会显示为超链接，而onclick的意思是to加载相关产品？因为您需要为执行此操作的Yip设置href属性。我还注意到一些其他事项。调用categoriesLink.onclick=function，我的for循环使用的是I++而不是I++。感谢您在那里的帮助sumit。另外，我还有一个建议：thanx，很高兴帮助您。sumit，我非常感谢您的帮助，但我已经发现了d另一个问题。你能想一想为什么显示的是品牌名称而不是类别名称，即类别：跑鞋。如果你注意到我遗漏了什么，这只是一个附带问题吗？