javascript - AJAX なしで Kendo UI TabStrip のコンテンツを更新する際の問題?

Question

Web サイトで特定のアクションの出力を表示する小さなコンソールがあります。別の種類の出力を表示する別のコンソールが必要なため、両方のコンソールを Kendo UI TabStrip に結合したいと思いました。問題は、表示される情報です。コンソールの は AJAX で受信されないため、以前のように HTML 要素を挿入し始めたときに、タブが更新されませんでした。

これは、タブを初期化する方法です。

    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects:'fadeIn'
            }
        }
    });

これは私のHTMLがどのように見えるかです:

<div id="tabConsole">
      <ul>
           <li class="k-state-active">Salida</li>
           <li id="notificacionTab">Notificaciones</li>
      </ul>
      <div id="userConsole"></div>
      <div id="notificationConsole"></div>
</div>

これは私がそれを更新しようとする方法です：

function appendToConsole(content, type, optional) {
//code to append to console
    var actualDate = new Date();
    var prevContent = $('#userConsole').html();
    if (typeof prevContent === 'undefined') {
        prevContent = '';
    }
    var strType = '';
    var iconType = '';
    var moreOutput = '';
    if (type == 1) {
        strType = 'infoConsole';
        iconType = 'infoIcon.png';
    } else if (type == 2) {
        strType = 'warningConsole';
        iconType = 'warningIcon.png';
        moreOutput = '<img id="viewDetails" value="' + optional + '" class="moreConsole" src="../Content/images/icons/arrow.png">';
    } else if (type == 3) {
        strType = 'errorConsole';
        iconType = 'errorIcon.png';
    }
    var iconOutput = '<img class="iconConsole" src="../Content/images/icons/' + iconType + '">';
    var dateOutput = '<div class="dateConsole">' + iconOutput + ' ' + actualDate.toLocaleDateString() + ', ' + actualDate.toLocaleTimeString() + ' : </div>';
    var consoleOutput = prevContent + '<div class="outputConsole">' + dateOutput + content + moreOutput + '</div>';
    $('#userConsole').html(consoleOutput.toString());
    var height = $('#userConsole')[0].scrollHeight;
    $('#userConsole').scrollTop(height);
//my try to update the tab
    var tabStrip = $('#tabConsole'),
        selectedIndex = tabStrip.data('kendoTabStrip').select().index(),
        clone = original.clone(true);
    clone.children('ul')
    .children('li')
    .eq(selectedIndex)
    .addClass('k-state-active')
    .end();
    tabStrip.replaceWith(clone);
    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects: 'fadeIn'
            }
        }
    });
}

TabStrip 内にある DIV の内容を更新するにはどうすればよいですか?

編集

Kendo UI は、タブを表す DIV の ID を tabConsole-1 および tabConsole-2 に名前変更したようで、更新が機能しなかった理由を説明しています。オーバーフロープロパティは機能し、id viewDetailsとクラスmoreConsoleを持つ画像も絶対位置に設定すると、タブを表す DIV の外側にレンダリングされますが、位置プロパティを相対に変更すると、画像は DIV 内にとどまりますが、表示されません私が望むようにDIVの最後に、しかしそれらの前に来るDIVのサイズに相対的です。

コンテンツが適切に表示されるようにスタイルを設定する方法について、私は本当に混乱しています。