#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 не копируются, они перемещаются.