kbd 태그가있는 요소를 렌더링하는 자바 스크립트

Question

kbd이라는 태그가 붙은 함수 인수를 "+"로 구분하고 임의의 숫자를 취할 수있는 HTML 페이지에 포함될 함수 (Javascript?)를 작성하고 싶습니다. 입력 인수

그래서, 예를 들어, fnRenderKBD(Ctrl+X, Y, Z)는 Ctrl 키 + X + Y로 + Z 렌더링 것이다.

중요한 점은 함수가 가변 개수의 인수를 사용할 수 있어야한다는 것입니다.

그런 기능을 쓸 수 있습니까 (그렇다면 어떻게?). 나는 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/