underground,
https://learn.javascript.ru/date
https://learn.javascript.ru/intl
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#container p:before {
content: attr(data-data)" - ";
color: #8B4513;
font-weight: bold;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const button = document.querySelector("button");
const input = document.querySelector("input");
const container = document.querySelector("#container");
const formatter = new Intl.DateTimeFormat("ru", {
year: "numeric",
month: "2-digit",
day: "2-digit",
hour: "2-digit",
minute: "2-digit",
second: "2-digit"
});
button.addEventListener("click", () => {
if (input.value) {
let data = new Date();
data = formatter.format(data);
container.insertAdjacentHTML("beforeend", `<p data-data="${data}">${input.value}</p>`);
input.value = "";
}
});
})
</script>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="input">
<input type="text" placeholder="your message" />
<button>add new message</button>
</div>
</body>
</html>