jScrollPane stopping from inserting child elements using .append()

<html>

<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="jScrollPane.css" type="text/css" rel="stylesheet" >
<script src="jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jScrollPane.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="abc">

</div>
</body>

</html>

test.css

#abc{
    width: 300px;
    height: 300px;
}

test.js

$(document).ready(function(){

$('#abc').jScrollPane();

setInterval(function(){$('#abc').append('<p>UDB</p>');},1000);

}) ;

I am trying to create a box in which contents can be added and as the box is full the content can be seen by scrollling for example a message box or notification box. But whenever i try to add jScrollPane() i cant add recursively the child by using append().

Solution

That's because jScrollPane transforms the html markup of the target element by adding 2 nested elements: jspContainer and jspPane. So you should be appending elements to the jspPane element inside #abc:

var target = $('#abc').jScrollPane();
setInterval(function()
{
    target.find('.jspPane').append('<p>UDB</p>');
    target.data('jsp').reinitialise();
},1000);

EDIT

Also you should call reinitialise after each append to allow jScrollPane to refresh it's dimensions to accomodate the new content. Here is a working fiddle: http://jsfiddle.net/yC5k9/