My previous answer may not be the most optimal solution. A better approach could be to use the following code:
function renderKeys(element, keysToDisplay) {
var separator = '';
var content = null;
for(var i = 0; i < keysToDisplay.length; i++) {
var renderedKey = document.createElement('kbd');
renderedKey = setText(renderedKey, keysToDisplay[i]);
if (i > 0) {
element.appendChild(document.createTextNode('+'));
}
element.appendChild(renderedKey);
}
}
function setText(element, text) {
if (element.textContent){
element.textContent = text;
} else {
element.innerText = text;
}
return element;
}
(function() {
var keys = [
'Ctrl+X',
'Y',
'Z'
];
var element = document.getElementById('display');
renderKeys(element, keys);
}());â
Live Demo: http://jsfiddle.net/wPg7z/
You can also try this alternative approach:
function renderKeys(element, keysToDisplay)
{
var separator = '';
var content = '';
for(var i = 0; i < keysToDisplay.length; i++) {
content += separator + '<kbd>' + keysToDisplay[i] + '</kbd>';
separator = '+';
}
element.innerHTML = content;
}
(function() {
var keys = [
'Ctrl+X',
'Y',
'Z'
];
var element = document.getElementById('display');
renderKeys(element, keys);
})();
â
Live Demo: http://jsfiddle.net/gTYxP/1/