div elements not updating with javascript

Question

Can any of you see why the div (#welcome) is not being updated in the below code? ``` function show_logged_in(success) { var is_logged_in = success; var dataString = {"reg":invalid, "login":invalid,"is_logged_in":is_logged_in}; $.ajax({ type:"POST", url:"PHP/class.ajax.php", data:dataString, dataType:'JSON', success: function(username) { alert("User is shown"); user = username; change_div(); }, error: function() { alert("ERROR in show_logged_in") } }); function change_div(){ $('#welcome').style.display = 'block'; $('#welcome').innerHTML = "Welcome" + user + "to SIK"; } } ``` The response from the ajax called is simply grabbing the username from the session variable. and it is returning correctly. And when it returns i would like the div to show up and say welcome. But for some reason the div is not being updated. Here is the html: ``

Accepted Answer

You can't do

```
$('#welcome').style.display = 'block';
$('#welcome').innerHTML = "Welcome" + user + "to SIK";
```

with jquery. This is because with `$('#welcome')` you are grabbing the jQuery object, not the DOM element.

To do this with jQuery:

```
$('#welcome').html('Welcome' + user + 'to SIK').show(); // Brought up in comments

$('#welcome').show(); // Old
$('#welcome').html('Welcome' + user + 'to SIK'); // Old
```

Or if you really want to grab the DOM Element:

```
$('#welcome')[0].style.display = 'block';
$('#welcome')[0].innerHTML = "Welcome" + user + "to SIK";
```

div elements not updating with javascript

Solution

Problem