When pressing Add foo, the textarea get's filled with string: foo.
However, after typing something in my textarea, my Add foo button doesn't work anymore.
<button onclick="document.getElementById('content').append('foo \n\n')">Add foo</button>
<textarea name="content" id="content" cols="30" rows="10"></textarea>For input elements, you can use += to append to the value.
Here is a cleaner version
content = document.querySelector("#content");
document.querySelector("button").addEventListener("click",function(){
content.value += " ADD FOO";
});<button>Add foo</button>
<textarea name="content" id="content" cols="30" rows="10"></textarea>Here is a version using your code
<button onclick="document.getElementById('content').value += 'foo \n\n'">Add foo</button>
<textarea name="content" id="content" cols="30" rows="10"></textarea>Since textarea is a form element, you should append to its value attribute:
function addFoo(){
let ta = document.getElementById('content')
ta.value += 'foo \n\n'
}<button onclick="addFoo()">Add foo</button>
<textarea name="content" id="content" cols="30" rows="10"></textarea>you have to get the content of your element then add what you want
<body class="flex justify-center items-center bg-purple-700">
<button onclick="document.getElementById('content').value=document.getElementById('content').value+'foo \n\n'">Add foo</button>
<textarea name="content" id="content" cols="30" rows="10"></textarea>
</body>
