Question

I’m trying to insert a div tag inside ajax but I just can’t figure out how. So far this is my code:

function userLogin(){
var email = $("#login_username_text").val();
var password = $("#login_password_text").val(); 
var login_url = connect_url+'retrieveUser.php?email='+email+"&password="+password;

$.ajax({
       type: 'GET',
        url: login_url,
        async: true,
        jsonpCallback: 'userCallback',
        contentType: "application/json",
        dataType: 'jsonp',
        success: function(json) { 
            is_logged = (json[0].logged==0)?false:true;
            alert(is_logged);
            alert(email);
            alert(password);

            if(is_logged==false){
                alert ("Invalid Username and Password");   //I want to change 
//this into a div tag so that it will be displayed on the page itself and so that
//I can add CSS codes here
            }
        },
        error: function(e) {

        }
}); 
}

I tried document.getElementById('login_invalid').innerText = 'Invalid Username and Password.'; but not working… any idea?

Thanks!

Answer 1

innerText isn’t an universally supported property. And while the more standardized textContent is useful to read the content it’s better to use innerHTML to replace the content of a div.

Assuming your div exists, you should use

document.getElementById('login_invalid').innerHTML = 'Invalid Username and Password.';

or, as you obviously use jQuery

$('#login_invalid').html('Invalid Username and Password.');