Javascript 访问加载DOM后附加的元素

在加载DOM之后，我创建了一个输入框和一个提交按钮，但在附加之后，我似乎无法访问它们

textInput = document.createElement('input');

textInput.setAttribute("id", "myMessage");
textInput.setAttribute("type", "text");
textInput.setAttribute("name", "message");

submitButton = document.createElement('input')

submitButton.setAttribute("id", "sendbutton");
submitButton.setAttribute("type", "submit");
submitButton.setAttribute("name", "submit");
submitButton.setAttribute("value", "Send");

document.getElementById("msgInput").append(textInput)
document.getElementById("msgInput").append(submitButton)

我试图以这种方式访问它，以捕获事件

keypress

、

keyup

和

onclick

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById("myMessage").addEventListener('keypress', handleKeyPress);
    document.getElementById("myMessage").addEventListener('keyup', handleKeyUp);

    document.querySelector('#sendbutton').onclick = () => {
        var data = {'msg': document.querySelector('#myMessage').value, 'username': username };
        append_msgs(data);
        document.querySelector('#myMessage').value = '';
    }
});

在函数内部尝试

console.log（document.querySelector（'#myMessage'））

，看看会返回什么。虽然它不能解决您的问题，但它可能会帮助您使用Inspector工具（Chrome中的F12）控制台来了解发生了什么。您是否尝试过使用

getElementById

而不是

querySelector

进行测试