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
#chat-messages {
15
display: flex;
16
flex-direction: column-reverse;
17
}
18
19
.badge-dot {
20
border-radius: 50%;
21
height: 10px;
22
width: 10px;
23
margin-left: 2.9rem;
24
margin-top: -.75rem;
25
}
26
xxxxxxxxxx
1
2
const button = document.querySelector("button");
3
const container = document.getElementById("chat-messages");
4
button.addEventListener("click", function() {
5
container.innerHTML += ' <ul class="list-unstyled mb-0">';
6
for (let i = 0; i < 20; i++) {
7
8
html = ' ';
9
html += ' <li class="p-2 border-bottom">';
10
html += ' <a href="#!" class="d-flex justify-content-between">';
11
html += ' <div class="d-flex flex-row">';
12
html += ' <div>';
13
html += ' <img';
14
html += 'src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"';
15
html += ' alt="avatar" class="d-flex align-self-center me-3" width="60">';
16
html += ' <span class="badge bg-success badge-dot"></span>';
17
html += ' </div>';
18
html += ' <div class="pt-1">';
19
html += ' <p class="fw-bold mb-0">' + i +'</p>';
20
html += ' <p class="small text-muted">Hello, Are you there?</p>';
21
html += ' </div>';
22
html += ' </div>';
23
html += ' <div class="pt-1">';
24
html += ' <p class="small text-muted mb-1">Just now</p>';
25
html += ' <span class="badge bg-danger rounded-pill float-end">3</span>';
26
html += ' </div>';
27
html += ' </a>';
28
html += ' </li>';
29
30
31
32
container.innerHTML += html;
33
}
34
container.innerHTML += ' </ul>';
35
});
Console errors: 0