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

#javascript #jquery #dom

#javascript #jquery #dom

Вопрос:

Вот мой 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'>amp;#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">amp;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>
 

Комментарии:

1. Не могли бы вы добавить свой HTML-код?

2. Как выглядит HTML-код ПЕРЕД запуском этого кода?

3. Это фактический код, или вы сначала преобразуете HTML в объект jQuery, например x = $(defaultControlClass); $('.step-next .controls').html(x); $('.fixed-control').html(x);

4. У вас была опечатка в вашем первоначальном первом запросе. Удален ответ, потому что код изменился

Ответ №1:

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

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

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

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

Комментарии:

1. Если аргумент to .html() является объектом jQuery, элементы DOM не копируются, они перемещаются.