Как работает .append?

Question

[Александр]

Столкнулся с проблемой из-за недостатка знаний =( на jq умею только простые функции...
Суть: есть ajax запрос в ответе приходит JSON и по идее циклом она должна разложится на 4 блока

for (key in responce) {
						$('#insert_history_' + room).append('<li class="list-group-item" style="border-bottom: 1px solid #5d5386;"><div class="media"><div class="media-left align-self-center mr-3 text-center" style="width: 30px;">');
						if(responce[key]['sensor'] == 'light') {
							$('#insert_history_' + room).append('<i class="ion-lightbulb"></i>');
						}
						$('#insert_history_' + room).append('</div><div class="media-body align-self-center">');
						if(responce[key]['sensor'] == 'light' && responce[key]['value'] == '1') {
							$('#insert_history_' + room).append('<div style="font-style: normal;font-weight: normal;color: #2c304d;">Включение света в комнате ' + responce[key]['room'] +'</div>');
						} else if(responce[key]['sensor'] == 'light' && responce[key]['value'] == '0') {
							$('#insert_history_' + room).append('<div style="font-style: normal;font-weight: normal;color: #2c304d;">Выключение света в комнате ' + responce[key]['room'] + '</div>');
						}
						$('#insert_history_' + room).append('<div style="font-size: 0.9rem;font-weight: normal;">Обнаружено <time class="timeago" datetime="' + responce[key]['addtime'] + '"></time></div>');
						$('#insert_history_' + room).append('</div></div></li>');
						
						$('#loading_history_' + room).hide();
						$('#insert_history_' + room).show();
					}

В моем понимании .append должна забирать все из блока '#insert_history_' + room и вставлять в конец, но только как бы не так :(
В итоге получается вот такое:

<ul class="list-group w-100" id="insert_history_corridor" style="max-height: 230px;overflow: auto;">
	<li class="list-group-item" style="border-bottom: 1px solid #5d5386;">
		<div class="media">
		<div class="media-left align-self-center mr-3 text-center" style="width: 30px;">

		</div>
	</div>
</li>

<i class="ion-lightbulb"></i>

<div class="media-body align-self-center">

</div>

<div style="font-style: normal;font-weight: normal;color: #2c304d;">Выключение света в комнате CorridorLight_chanel_1</div>
<div style="font-size: 0.9rem;font-weight: normal;">Обнаружено <time class="timeago" datetime="2019-07-13 14:38:08"></time>

</div>

Answer 1

[irishmann]

Неверно понимаете.

$('#element').append('<div class="someclass">хоп-хей-ла-ла-лей</div>');

В примере, всем элементам имеющие селектор, в данном случае id, elementдобавится в дочерние <div class="someclass">хоп-хей-ла-ла-лей</div>
То есть если у нас было так:

<div id="element">
    <div>bla-bla-bla</div>
</div>
<div id="element" class="class_1">
    <div>bla-bla-bla-2</div>
</div>

После выполнения

$('#element').append('<div class="someclass">хоп-хей-ла-ла-лей</div>');

Будет вот так

<div id="element">
    <div>bla-bla-bla</div>
    <div class="someclass">хоп-хей-ла-ла-лей</div>
</div>
<div id="element" class="class_1">
    <div>bla-bla-bla-2</div>
    <div class="someclass">хоп-хей-ла-ла-лей</div>
</div>

.append документация

Comments

[Александр]

Хорошо спасибо, а касаемо моего примера что лучше использовать?(