New to Kendo UI for jQuery? Start a free 30-day trial

InsertAfter

methods

Inserts a PanelBar item after the specified referenceItem

insertAfter

Parameters:itemString|Element|jQuery|Array

Target item, specified as a JSON object. You can pass item text, content or contentUrl here. Can handle an HTML string or array of such strings or JSON.

referenceItemString|Element|jQuery

A reference item to insert the new item after

<ul id="panelbar">
    <li>Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
    <li>Item 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
    $("#panelbar").kendoPanelBar();

    var panelBar = $("#panelbar").data("kendoPanelBar");

    panelBar.insertAfter(
        [{
            text: "Item 1",
            url: "https://www.telerik.com"                // Link URL if navigation is needed, optional.
        },
        {
            text: "<b>Item 2</b>",
            encoded: false,                              // Allows use of HTML for item text
            content: "text"                              // Content for the content element
        },
        {
            text: "Item 3",
            contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
        },
        {
            text: "Item 4",
            imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
            expanded: true,                              // item is rendered expanded
            items: [{                                    // Sub item collection.
                 text: "Sub Item 1"
            },
            {
                 text: "Sub Item 2"
            }]
        },
        {
            text: "Item 5"
        }],
        "li:first-child"
    );
</script>