javascript - kbdタグ付き要素をレンダリングするJavascript

Question

HTMLページに含まれる（Javascript？）関数を作成してkbd、「+」で区切られたタグ付きの関数引数をレンダリングし、任意の数の入力引数を受け取ることができるようにしたいです。

したがって、たとえば、++fnRenderKBD(Ctrl+X, Y, Z)としてレンダリングされます。Ctrl+XYZ

重要なことは、関数が可変数の引数を取ることができる必要があるということです。

そのような関数を書くことは可能ですか（もしそうなら、どのように）？私は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/