Creating new CSS element everytime database updates I have created a function using jQuery Ajax which create a new CSS element whenever I update the database using a form.

Is it ok?  If not, hat can be the best method to do it?

$(document).ready(function(){
    $('#statusupdater').submit(function(e) {
        updatestatus();
        e.preventDefault();
    });
});

function updatestatus()
{
$.ajax({
    type: "POST",
    url: "statusupdate.php",
    data: $('#statusupdater').serialize(),
    dataType: "dataString"          
});
$('#statuscontainer').prepend( $('&lt;div id="stat"&gt;').load('statusupdate.php'));
$("#statusupdater")[0].reset();
    $('.statuspop').fadeOut(300);
            $('#opacify').hide();
}


statusupdate.php

&lt;?php include "dbcon.php"; 

 $status=$_POST['status'];
 $photo=$_POST['photoupload'];

 if ($status || $photo)
 {
    $date = date('m/d/Y h:i:s');
    $statusinsert = mysqli_query($con,"INSERT INTO status (st_id,statu,date_created,userid) VALUES ('','$status','$date','$id')" );
 }

 $selectstatus = mysqli_query($con,"select * from status where userid = '".$id."' order by st_id desc limit 1");
 $getstatus=mysqli_fetch_array($selectstatus);
 ?&gt;

    &lt;div class="statbar"&gt;&lt;?php echo $getstatus["userid"];?&gt;&lt;/div&gt;
    &lt;div class="stattxt"&gt;&lt;?php echo $getstatus["statu"];?&gt;&lt;/div&gt;
Set the return datatype to html and update the DOM in the success callback:

function updatestatus()
{
    $.ajax({
        type: "POST",
        url: "statusupdate.php",
        data: $('#statusupdater').serialize(),
        dataType: "html",
        success: function(data, status, xhrObj){
            $('#statuscontainer').prepend($('&lt;div id="stat"&gt;').html(data));
            $("#statusupdater")[0].reset();
            $('.statuspop').fadeOut(300);
            $('#opacify').hide();
        }
    });
}


You could also update the DOM using the error and statusCode callbacks if it fails.