为什么这个javascript不工作

Question

我正在尝试构建一个功能，用于将面包屑添加到我的网站导航中。但是，现在我有两个问题。 1）由于某些原因，crumb数组一次只能容纳2个面包屑，而2），即使html元素存储在crumbs数组中，也只有新的面包屑的HTML被渲染。其他碎屑呈现为：

[object HTMLLIElement] 

//脚本

function add_crumb(name) { 

    // get current bread crumbs 
    var crumbs = $('#breadcrumbs ul li').toArray(); 

    // no current bread crumbs, so we don't need an arrow image 
    if (crumbs.length == 0) { 

     var new_crumb = "<li class='crumb' style='display:inline'> " + name + " </li>"; 

    } else { 

     var new_crumb = "<li class='crumb' style='display:inline'><img class='bc_arrow' src='images/icons/breadcrumb_arrow.png' width='19' height='18'> " + name + "</li>"; 

    } 

    // add new bread crumb to array 
    crumbs.push(new_crumb); 

    // render 
    $('#breadcrumbs').html('<ul>' + crumbs.join('') + '</ul>'); 


} 

不管怎么说，我一边通过创建一个新的空白阵列，并且每个元素调用.innerHTML踩第二个问题（即使我不明白为什么我必须这样做，因为jQuery的网站说，该元素存储像这样：

[<li id="foo">, <li id="bar">] 

但是，如果有人可以请帮我找出它为什么只在存储两个面包屑时间，我真的，真的很感激它。

感谢

Answer 1

HTML元素的对象不是字符串，你不能简单地他们Concat的使用.join的字符串。尝试追加它们。

$('#breadcrumbs').html('<ul />').find("ul").append(crumbs); 

Answer 2

$('#breadcrumbs ul li').toArray();给你一个HTMLLIElements的数组。

你应该采取不同的方法。不需要任何阵列：

if($('#breadcrumbs ul li').length){ 
    $('#breadcrumbs ul').append(
     "<li class='crumb' style='display:inline'>" 
     + name + 
     "</li>"); 
}else{ 
    $('#breadcrumbs ul').append(
     "<li class='crumb' style='display:inline'>" 
     + "<img class='bc_arrow' src='images/icons/breadcrumb_arrow.png' width='19' height='18'>" + 
     + name + 
     "</li>"); 
}