Создать Div на Keyevent

Question

Я бы хотел, чтобы div был создан при событии клавиши, поэтому, если я нажму определенную клавишу, например, K, div будет создан.

У меня есть этот код, который создает div при загрузке страницы. Однако у меня есть проблемы с выяснением, как добавить ключевое событие.

Может ли кто-нибудь мне помочь?

JavaScript:

var div = document.createElement('div');


div.innerHTML = "...";
div.style.color = 'red';
div.style.backgroundColor = 'red';
div.style.width = '40px';
div.style.height = '40px';
div.style.float = 'left';


div.setAttribute('class', 'linda'); // and make sure myclass has some styles in css
document.body.appendChild(div);


var div = document.createElement('div');


div.innerHTML = "...";
div.style.color = 'blue';
div.style.backgroundColor = 'pink';
div.style.width = '40px';
div.style.height = '40px';
div.style.float = 'left';


div.setAttribute('class', 'bella'); // and make sure myclass has some styles in css
document.body.appendChild(div);

Answer 1

document.addEventListener("keydown", keyDownTextField, false);
function keyDownTextField(e) {
    var keyCode = e.keyCode;
    if (keyCode == 75) {
        var div = document.createElement('div');
        div.innerHTML = "...";
        div.style.color = 'blue';
        div.style.backgroundColor = 'pink';
        div.style.width = '40px';
        div.style.height = '40px';
        div.style.float = 'left';
        div.setAttribute('class', 'bella'); // and make sure myclass has some styles in css
        document.body.appendChild(div);
    }
}

Answer 2

В ключевых событиях ключи идентифицируются уникальным кодом ключа. Поэтому, если код 75, выдается предупреждение. Здесь вы можете динамически отображать элементы в DOM

document.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 75) {
        alert("K is pressed ");
    }
});