如何用JavaScript将含学生变量的div动态追加到指定div中？

我来帮你搞定这个问题！你已经把AJAX请求的核心逻辑写得很到位了，现在只需要在success回调里把返回的学生数据转换成你需要的HTML结构，再追加到目标div里就行，同时还要注意处理旧结果的残留问题。

修改后的完整代码 #

$('#search_bar').keyup(function () {
    var keyword = $('#search_bar').val();
    // 每次输入时先清空旧的搜索结果，避免重复堆积
    $('#suggested_students').empty();
    
    if(keyword.length > 2){
        console.log('hey')
        var url = window.location.pathname;
        $.ajax({
            method: 'GET',
            url: url,
            data: { 'keyword': keyword },
            dataType: 'json',
            success: function (data) {
                var suggestions = data.students;
                // 用let声明循环变量，避免var的变量提升问题
                for(let i = 0; i < suggestions.length; i++){
                    var current_student = suggestions[i];
                    var studentName = current_student[0];
                    var studentId = current_student[1];
                    
                    // 用ES6模板字符串构建符合要求的HTML结构，写法更简洁清晰
                    var studentDiv = `<div id='${studentName}' onClick='moveProfile("${studentName}", "${studentId}")'>${studentName}<br>${studentId}<br></div>`;
                    
                    // 将构建好的div追加到目标容器中
                    $('#suggested_students').append(studentDiv);
                }
            }
        });
    }
})

关键细节说明 #

• 清空旧结果：每次触发keyup事件时先调用$('#suggested_students').empty()，这样新的搜索结果不会和之前的结果叠加在一起。
• 模板字符串拼接：使用反引号`包裹的模板字符串，可以直接通过${变量名}插入动态值，比传统的字符串拼接更易读也更不易出错。
• 循环变量作用域：把循环里的var i改成let i，避免因var的函数级作用域导致的潜在问题。
• 特殊字符处理：如果你的学生姓名/ID里包含引号这类特殊字符，可能需要额外做转义处理（比如用encodeURIComponent），如果数据里没有这类情况，当前写法就完全够用。

内容的提问来源于stack exchange，提问作者wtreston