sergiocharm,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#id_textarea {
background-color: #fff
}
.offer {
padding: 3px 10px;
cursor: pointer
}
.offer:hover {
background-color: #ddd;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
const headlines = ["Добавить весь список", "Привет мир", "Проверка связи", "Чистка свитера", "Ну что, получилось?"];
const textarea = document.querySelector("#id_textarea");
const control = document.querySelector(".content");
const button = document.createElement("div");
button.className = "offer";
const buttons = headlines.map((txt, i) => {
let clone = button.cloneNode(true);
let up = i ? txt : headlines.slice(1).join("\n");
clone.textContent = txt;
clone.addEventListener('click', () => {
console.log(i)
textarea.value += `${up}\n`;
});
return clone;
})
control.append(...buttons);
document.querySelector(".btn").addEventListener("click", () => {
navigator.clipboard.writeText(textarea.value)
alert(`Скопировано:\n${textarea.value}`);
})
})
</script>
</head>
<body>
<div>
<h3>Заголовки</h3>
<textarea id="id_textarea" rows="5" cols="85"></textarea> <br />
<div class="content">
<h3>Все заголовки (кликни по заголовку, он добавится в поле справа) </h3>
</div>
<br />
<button type="button" class="btn">Копировать весь список с переносами</button>
</div>
</body>
</html>