JavaScript呈现kbd标记的元素

Question

我想写一个（Javascript？）函数包含在HTML页面中，允许我呈现标记为​​的函数参数，由“+”分隔，并且能够取任意数字的输入参数。

因此，例如，fnRenderKBD(Ctrl+X, Y, Z)将渲染为按Ctrl + X +Ÿ+ž。

重要的是该函数应该能够获取可变数量的参数。

是否可以编写这样的函数（如果是这样，如何）？我几乎没有JS的知识。

Answer 1

我在底部的答案不是我写过的最好的东西。更好的解决方案看起来是这样的：

function fnRenderKBD(elem, keysToDisplay) { 
    var delimiter = ''; 
    var content = null; 
    for(var i = 0, length = keysToDisplay.length; i < length; i++) { 
     var renderedKey = document.createElement('kbd'); 
     renderedKey = setText(renderedKey, keysToDisplay[i]); 

     if (i > 0) { 
      elem.appendChild(document.createTextNode('+')); 
     } 

     elem.appendChild(renderedKey); 
    } 
} 

function setText(elem, text) { 
    if (elem.textContent){ 
     elem.textContent = text; 
    }else{ 
     elem.innerText = text; 
    } 

    return elem; 
} 

(function() { 
    var keys = [ 
     'Ctrl+X', 
     'Y', 
     'Z' 
    ]; 

    var elem = document.getElementById('display'); 

    fnRenderKBD(elem, keys); 
}());​ 

演示：http://jsfiddle.net/wPg7z/

---

像这样的东西应该工作：

function fnRenderKBD(elem, keysToDisplay) 
{ 
    var delimiter = ''; 
    var content = ''; 
    for(var i = 0, length = keysToDisplay.length; i < length; i++) { 
     content+= delimiter + '<kbd>' + keysToDisplay[i] + '</kbd>'; 
     delimiter = '+'; 
    } 

    elem.innerHTML = content; 
} 

(function() { 
    var keys = [ 
     'Ctrl+X', 
     'Y', 
     'Z' 
    ]; 

    var elem = document.getElementById('display'); 

    fnRenderKBD(elem, keys); 
})(); 
​ 

演示：http://jsfiddle.net/gTYxP/1/