我添加动态元素到一个html表单，我有答案检查，并认为为了更简单，更容易阅读的代码，我会得到元素的ID使用…
$(' #id ');
而不是...
document.getElementByID(' id ');
但我注意到它不会拉相同的信息。当尝试获取输入框的值时，使用JQuery方法时，它总是返回'undefined'，但使用JavaScript时则不会。下面是我的代码片段的上下文...

var validation = true;

function checkSubmit() {
  
    // Using Javascript method
    const firstname = document.getElementById('firstname');
    const firstname_title = document.getElementById('firstname-title');

    if (firstname.value.length == 0) { // JQuery method doesn't return correct value here
        if (validation) {
            validation = false;
            firstname.style = "border-color: red;color: whitesmoke;transition: 0.25s;";
            firstname_title.style = "border-color: red;transition: 0.25s;";
            
            name_label = document.createElement('label');
              name_label.className = "d-flex justify-content-center fade-content-label";
              name_label.id = 'name-label';
              name_label.style = "color: red;font-size: 20px";
              name_label_node = document.createTextNode('Please enter a firstname');
              name_label.appendChild(name_label_node);
            var insert = $(' #name-insert '); // JQuery method works here
            insert.prepend(name_label);
        }
    }
}

我已经确保我的JQuery CDN库是最新的，并且没有任何版本冲突。这两种方法之间有什么根本的区别吗？