xxxxxxxxxx
1
<button type="button" class="btn btn-primary">
2
CLICK
3
</button>
4
5
<div id="chat-messages" class="pt-3 pe-3" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">
6
7
</div>
xxxxxxxxxx
1
#chat3 .form-control {
2
border-color: transparent;
3
}
4
5
#chat3 .form-control:focus {
6
border-color: transparent;
7
box-shadow: inset 0px 0px 0px 1px transparent;
8
}
9
10
#chats li {
11
cursor: pointer;
12
}
13
14
.badge-dot {
15
border-radius: 50%;
16
height: 10px;
17
width: 10px;
18
margin-left: 2.9rem;
19
margin-top: -.75rem;
20
}
21
xxxxxxxxxx
1
2
const button = document.querySelector("button");
3
const container = document.getElementById("chat-messages");
4
button.addEventListener("click", function() {
5
const listElement = document.createElement('ul');
6
listElement.classList.add('list-unstyled', 'mb-0', 'd-flex', 'flex-column-reverse');
7
8
for (let i = 0; i < 20; i++) {
9
10
html = ' ';
11
html += ' <li class="p-2 border-bottom">';
12
html += ' <a href="#!" class="d-flex justify-content-between">';
13
html += ' <div class="d-flex flex-row">';
14
html += ' <div>';
15
html += ' <img';
16
html += 'src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"';
17
html += ' alt="avatar" class="d-flex align-self-center me-3" width="60">';
18
html += ' <span class="badge bg-success badge-dot"></span>';
19
html += ' </div>';
20
html += ' <div class="pt-1">';
21
html += ' <p class="fw-bold mb-0">' + i +'</p>';
22
html += ' <p class="small text-muted">Hello, Are you there?</p>';
23
html += ' </div>';
24
html += ' </div>';
25
html += ' <div class="pt-1">';
26
html += ' <p class="small text-muted mb-1">Just now</p>';
27
html += ' <span class="badge bg-danger rounded-pill float-end">3</span>';
28
html += ' </div>';
29
html += ' </a>';
30
html += ' </li>';
31
32
33
34
listElement.innerHTML += html;
35
container.appendChild(listElement)
36
container.scrollTo(0, listElement.scrollHeight);
37
}
38
});
Console errors: 0