Cách thêm chữ vào vị trí dấu nhắc đánh chữ khi bấm vào nút trong Javascript

Đã có giải pháp cho vấn đề này https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement

Script:

  <script type="text/javascript">
function insertMetachars(sStartTag, sEndTag) {
  var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
  oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
  oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
  oMsgInput.focus();
}
 </script>

Form:

<form name="myForm">
<p><span onclick="insertMetachars('Hello');">Son Goku</span> </p>
<p><textarea name="myTxtArea" rows="10" cols="50">Alibaba và 40 bà vợ</p></form>

Mình thực sự không hiểu câu hỏi lắm, nhưng có lẽ sửa code như này sẽ hợp lí theo yêu cầu của bạn?

<form><textarea id="txt1"></textarea> <span onclick="insertText('txt1', 'Hello');">Son Goku</span><span onclick="insertText('txt1', 'World');">Vegeta</span> </form>

<script>
	function insertText(elemID, text) {
		var element = document.getElementById(elemID);
		element.value += text;
	} 
</script>

Vấn đề của bạn nằm ở chỗ:

elem.innerHTML += text;

DOM lúc này vẫn thay đổi nhưng giá trị hiển thị vẫn sẽ là giá trị cũ, bạn có thể debug bằng mở F12 -> Elements -> Để sử dụng Textarea bạn nên sử dụng như sau:

element.value += text;

Bạn có thể xem ở đây nhé https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip