Necesito que cuando se presione agregar se cree un div debajo con exactamente el mismo texto que el escrito dentro del text area, con los saltos de linea incluido. ya que ahora mismo el texto se copia dentro del div pero no con los saltos de linea imagen de la pagina y su mal funcionamiento
<body>
<div id="colorInterfas">
<p>FONDO</p>
<input type="color" name="color" id="colorFondo">
<input type="color" name="color" id="colorLetra">
<p>LETRA</p>
</div>
<textarea id="input" cols="30" rows="10"></textarea>
<button id="button">agregar</button>
</div>
<ul id="container">
</ul>
</body>
let text = document.querySelector('#input');
let button = document.querySelector('#button');
let container = document.querySelector('#container');
let colorPickerFondo = document.querySelector('#colorFondo');
let colorPickerLetra = document.querySelector('#colorLetra');
colorPickerFondo.addEventListener('change', () => {
text.style.background = colorPickerFondo.value
})
colorPickerLetra.addEventListener('change', () => {
text.style.color = colorPickerLetra.value
})
if (text.style.background === '') {
text.style.background = colorPickerFondo.value;
}
if (text.style.color === '') {
text.style.color = colorPickerLetra.value;
}
button.addEventListener('click', () => {
if (text.value.trim().length !== 0) {
let CONTENT = document.createElement('il');
CONTENT.classList.add('content');
CONTENT.textContent = text.value;
CONTENT.setAttribute('style', ` background: ${text.style.background} ; color: ${text.style.color}; width: 180px; height: 180px;`);
container.appendChild(CONTENT);
}
});
Con este codigo el texto es copiado, pero todo junto, sin los saltos de linea.
la idea es que se cree un div simulando una nota tipo "post it" debajo
Muchas gracias.