jQuery jScrollPane replace specific div inside of getContentPane()

Question

I'm using a custom jScrollPane and dynamically populate it using jQuery from a returned partial view.

I'm populating it like this:

var pane = $('.mainContainingDiv').jScrollPane(settings);
var api = pane.data('jsp');

// Populate function
api.getContentPane().html(someData);
api.reinitialise();

This is great and works exactly as I expect it to, but this content pain currently contains content that only needs to be set once so I do not want to return more than i have to on every server call. Rather, i'd like to move it out of the partial view and into the main view that contains the javascript.

Here's some html to illustrate this better:

BEFORE:

<div class="myContainingDiv">
    <div class="staticContentDivThatIDontWantReturnedOnEveryServerCall">
       Info
    </div>
    <div class="dynamicDiv">
       More Info
    </div>
</div>

so right now I'm replacing both divs with the getContentPane() function. How can I only replace one. e.g.

CALL 1

// some controller calls
api.getContentPane().html(NEWDATAFROMWHEREVER);

Here's what this results in (as expected), and the result I want.

UNDESIRED RESULT

<div class="myContainingDiv">
    NEWDATAFROMWHEREVER
</div>

DESIRED RESULT

<div class="myContainingDiv">
    <div class="staticContentDivThatIDontWantReturnedOnEveryServerCall">
       Info
    </div>
    NEWDATAFROMWHEREVER
</div>

So how can I replace only one div in the container with the getContentPane() call via jScrollPane

Thanks

Answer 1

Figured it out:

        api.getContentPane().children('.dynamicDiv').html(NEWDATAFROMWHEREVER);
        api.reinitialise();

hopefully this helps someone else