Добавить текст в поле textarea

document.querySelector('.addBr').onclick = function () { 
  document.querySelector('textarea').value = document.querySelector('textarea').value + '<br>' 
};

<textarea name="description" rows="10" cols="70"> 
    asdasd 
    asdasd 
    asdasd 
    asdasd 
</textarea> 
 
<button class='addBr' type="button">add br</button>

В свое время тоже была такая задача, сделать простенький редактор

В итоге я решил задачу через добавление простой панельки инструментов

Демо там 404 сейчас, но исходник с примеров в архиве качаются нормально

Опишу суть работы. При создании панелька инструментов привязывается к определенной textarea, а при нажатии кнопок из textarea вынимаются данные - положение курсора, выделение и так далее. После того, как данные удалось вынуть, предпринимаются действия - добавить тег в позицию курсора, обрамить выделение тегами или что-то еще

Вы можете подключить готовый BBEditor, убрать лишние кнопки, добавить свои кнопки для своих тегов, поменять поведение и так далее. Можно стилизовать и поменять тему/кнопки/картинки

А можно просто посмотреть исходник и скопировать только то что вам нужно:

function doAddTags(tag1, tag2, obj) {
    var postfix = "";
    var suffix = "";
    if (tag1 == "[blockquote]" || tag1 == "[pre]") {
        suffix = postfix = "\r\n";
    }
    textarea = document.getElementById(obj);
    if (document.selection) {// Code for IE
        textarea.focus();
        var sel = document.selection.createRange();
        //alert(sel.text);
        sel.text = tag1 + suffix + sel.text + postfix + tag2;
    } else {// Code for Mozilla Firefox
        var len = textarea.value.length;
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;
        var scrollTop = textarea.scrollTop;
        var scrollLeft = textarea.scrollLeft;
        var sel = textarea.value.substring(start, end);
        //alert(sel);
        var rep = tag1 + suffix + sel + postfix + tag2;
        textarea.value = textarea.value.substring(0, start) + rep + textarea.value.substring(end, len);
        textarea.scrollTop = scrollTop;
        textarea.scrollLeft = scrollLeft;
    }
}

Это функция, обрамляющая выделение двумя тегами, например [b]...[/b]. Лаконично и кратко

В вашем случае добавить <br> по клику можно примерно вот так:

function brClick(textarea_id) { 
  var tag1 = ''; 
  var tag2 = '<br>'; 
  var suffix = ''; 
  var postfix = ''; 
 
  textarea = document.getElementById(textarea_id); 
  if (document.selection) { // Code for IE 
    textarea.focus(); 
    var sel = document.selection.createRange(); 
    sel.text = tag1 + suffix + sel.text + postfix + tag2; 
  } else { 
    var len = textarea.value.length; 
    var start = textarea.selectionStart; 
    var end = textarea.selectionEnd; 
 
    var scrollTop = textarea.scrollTop; 
    var scrollLeft = textarea.scrollLeft; 
 
    var sel = textarea.value.substring(start, end); 
    var rep = tag1 + suffix + sel + postfix + tag2; 
    textarea.value = textarea.value.substring(0, start) + rep + textarea.value.substring(end, len); 
    textarea.scrollTop = scrollTop; 
    textarea.scrollLeft = scrollLeft; 
  } 
}

<textarea id="textarea_id" rows="6" width="98%"> 
Some text here 
with br or without 
so, the end 
</textarea> 
<p> 
  <button onclick="brClick('textarea_id')">Add <br> tag to textarea</button> 
</p>

Вот так правильно:

document.querySelector('button').onclick = function() 
{ 
	var ta = document.querySelector('textarea'); 
	ta.value += '\n'; 
	ta.focus(); // чтобы не терялся focus после нажатия на кнопку 
};

<button type="button">Новая строка</button><br> 
<textarea name="description" rows="10" cols="50">Первая строка</textarea>

В textarea тег <br> должен быть заменён на \n, поскольку иначе переноса строки не будет, а будет добавляться просто <br>, но ни как перенос строки, а как текст.