jCarousel - dynamically add items

Question

I want to add some new items to my jCarousel. My jCarouse looks like:

<div id="alertMessagePanelId" class="jcarousel alertMessagePanelStyle">
    <ul id="mycarousel">
        <li><p>Alert Message: 1</p></li>
        <li><p>Alert Message: 2</p></li>
        <li><p>Alert Message: 3</p></li>
        <li><p>Alert Message: 4</p></li>
        <li><p>Alert Message: 5</p></li>
        <li><p>Alert Message: 6</p></li>
    </ul>
</div>

I tried to make a function to add some new element to DOM. The elements are added, but the jCarousel is not seeing it.

function addAlertMessage() {
var ul = document.getElementById("mycarousel");
var il = document.createElement("li");
var p = document.createElement("p");
p.appendChild(document.createTextNode("New Message"));
il.appendChild(p);
ul.appendChild(il);  }

This is a correct way to add new elements to the jCarousel?

Answer 1

Yep, it is pretty simple. After you added new items, you just need to call

$('carousel-selector').jcarousel('reload', {});

Look this for more information: jCarousel reload