如何使用变量Javascript将div附加到div中

Question

I have this div here:

<div id='suggested_students'>

</div>

I am trying to write some javascript which will append this with the correct values:

<div id='STUDENT NAME' onClick='moveProfile("STUDENT NAME", "STUDENT ID")'>
STUDENT NAME<br>
STUDENT ID<br>
</div>

This is the javascript/ajax I have:

$('#search_bar').keyup(function () {

    var keyword = $('#search_bar').val();
    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;
                for(i = 0; i< suggestions.length; i++){
                    var current_student = suggestions[i];
                    console.log(current_student[0])
                    console.log(current_student[1])

                }
            }
            });
    }
})

and each iteration of the for loops produces something like:

[STUDENT NAME, STUDENT ID

How do I go about filling in these place holders and then appending the html to the main div for each student.

Answer 1

This will add the student information into the container div for you...

success: function (data) {

    // get a reference to the container div
    var $container = $("#suggested_students");

    // remove any existing student information
    $container.empty(); 

    var suggestions = data.students;

    for(i = 0; i< suggestions.length; i++){

        var current_student = suggestions[i];

        // create a new div to add to the container element    
        var $div = $("<div/>");

        $div.data("name", current_student[0]);
        $div.data("id", current_student[1]);

        $div.html(current_student[0] + "<br/>" + current_student[1]);

        $div.on("click", moveProfile);

        $container.append($div);
    }
}

There's a couple of things worth noting here. Firstly, I didn't give each new div the ID of the student name. There are several reasons for this, but the main one is that it's not a very friendly ID. Names have spaces and can also have other punctuation marks. Also, you can have multiple students with the same name, but you can't have multiple elements with the same ID.

Secondly, I set data attributes for each student div, rather than pass the values in an inline event handler. To handle the click event you'd need this extra function, already referenced above...

function moveProfile() {
    var $this = $(this);
    var studentId = $this.data("id");
    var studentName = $this.data("name");

    // do whatever you need with the student info here
}

Answer 2

Try this:

$('#search_bar').keyup(function () {
    var keyword = $(this).val(), $suggested_students;
    $suggested_students = $('#suggested_students');

    if (keyword.length > 2) {
            var url = window.location.pathname;
            $.ajax({
            method: 'GET',
            url: url,
            data: {
                'keyword': keyword
            },
            dataType: 'json',
            success: function (data) {
                var i, suggestions, s_name, s_id, current_student;

                suggestions = data.students;
                // empty before
                $suggested_students.empty();
                for(i = 0; i< suggestions.length; i++){
                    current_student = suggestions[i];
                    s_id = current_student[0];
                    s_name = current_student[1]
                    $suggested_students.append(
                        "<div id='" + s_id + "' onClick='moveProfile(\"" + s_name + "\", \"" + s_id +"\")'>" +
                            s_id +  " <br>" +
                            s_name + " <br>" +
                        "</div>"
                    );
                }
            }
        });
    }
});

I suggest, however, to abort the $.ajax call in case a new string is written or wait a few moments before executing a new one and avoid using onClick in this way: just add a class or a selector like #suggested_students > div and add a click event listener to each div inside the container.

Answer 3

for(i = 0; i< suggestions.length; i++){
    var current_student = suggestions[i];
    console.log(current_student[0])
    console.log(current_student[1])
    var div = "<div id='"+current_student[0]+"' onClick='moveProfile(\""+current_student[0]+"\", "+current_student[1]+")'>"+current_student[0]+"<br>"+current_student[1]+"<br></div>";
    $('#suggested_students').append(div);
}