последовательные вызовы html () перезаписывают первый

Question

Вот мой jquery

 var defaultControlClassic =  "<div id='control-textarea-wrapper' class='control'>" + "\n";
    defaultControlClassic +=   "<textarea id='control-textarea' tabindex='1000' rows='1'></textarea>" + "\n";
    defaultControlClassic +=       "<button type='button' class='btn btn-link btn-icon'><i class='material-icons input-send'>&#xE163;</i></button>" + "\n";
    defaultControlClassic += "</div>" + "\n";


    var msg = jsonResponse.html;

    intent = jsonResponse.intent;

    //Create a dom node out of the response
    var div = document.createElement('div');
    div.innerHTML = msg.trim();
    var domMsg = div.firstChild;


    //If Typing animation is happening time to remove it
    $('.sender-action').parent('.response').remove();

    //Get the Control from the response
    var control = domMsg.getElementsByClassName("control")[0];

    //Remove the current control from the domMsg
    $(domMsg).find('.control').remove();

    //Use default control if none specified
    if (control === undefined) control = defaultControlClassic;

    //Add the control

    $('.step-next .controls').html(control);
    $('.fixed-control').html(control);

, и он прекрасно работает с приведенным выше текстовым значением "defaultControlClassic"

, но когда "control" назначается этим ...

var control = domMsg.getElementsByClassName("control")[0];

Первый вызов html () работает, также как и второй, но первый перезаписывается вторым

  $('.step-next .controls').html(defaultControlClassic);
    $('.fixed-control').html(defaultControlClassic);

Вот HTML

 <div class="chat-window" >
        <header class="chat-header">
            <div class="modern-nav d-flex justify-content-between">
                <button type="button" class="btn btn-link btn-previous" style="display: none;"><i class="fal fa-long-arrow-left"></i> Previous</button>
                <div class="spinner">&nbsp;</div>
                <button type="button" class="btn btn-link btn-restart" style="display: none;">Restart </button>
            </div>
            <div class="progress" >
                <div class="progress-bar" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">1%</div>
            </div>
        </header>
        <div class="chat-body">
            <div class="step-container">
                <form class="step-form step step-next">
                    <div class="messages" class="" ></div>
                    <div class="controls" class="" ></div>
                </form>
            </div>
            <div class="fixed-control"></div>
        </div>

Answer 1

Извините, ребята - это был запутанный вопрос.

html () не работает, если только он на самом деле не html - по какой-то причине, если это объект, который он перезаписывает

Вот одно из решений

//Use default control if none specified
    if (control === undefined)
        control = defaultControlClassic;
    else
        control = $('<div>').append($(control).clone()).html();