append php in jquery

I’m trying to dynamically create a div to show error messages using jquery. I’m able to use append() to create the HTML easily enough, but I need to call a php variable in order to display the content. If I just try adding php opening and closing tags like I would ordinarily, the append method doesn’t behave as expected and outputs a seemingly random section from the middle of the line. How can I overcome this problem?

Here’s the jquery code as I have it:

$(document).ready(function() {
    var errors_php = "<?php  echo validation_errors('<li>','</li>'); ?>";
    $('#wrapper').append("<div id='errors'><ul>"+errors_php+"</ul></div>");
    $('#errors').slideDown('slow');
});

Note: the validation_errors() function is a codeigniter method. Incidentally, if I remove the errors_php variable from the append() it works as expected, displaying an empty div.

EDIT:

The generated code is:

<div id="errors"><ul>',''); ?&gt;</ul></div>

Answer

As per your comment:

I just looked up that question and it is exactly what I’m trying to do. Unfortunately, I don’t understand from the answers how they’ve solved it. I’ve never used json data before. Where should I put that piece of code?

JSON data is simply JavaScript Object Notation, so if you set a JavaScript a variable to a JSON value it will essentially recreate a copy of the object that was serialized into JSON in the first place.

var errors_php = "<?php  echo validation_errors('<li>','</li>'); ?>";

should be:

var errors_php = <?php echo json_encode(validation_errors('<li>','</li>')); ?>;