Appending to reddit <textarea>'s is not reflected. Only appears in DOM

Question

I'm writing a Chrome extension for Hearthstone sub-reddits.

What's working: When the user types '[[' into a Reddit comment <textarea> it creates a <select>. The user chooses a card from the list.

Goal: The extension should add the card's name to the <textarea> with ']]' so the result is something like [[Dreadsteed]]. This format works with /u/hearthscan-bot.

Problem: The extension DOES add the card's name to the <textarea>, however, it is only reflected in the DOM. The text does not appear in the browser.

Discussion: I assume there must be some plug-in that Reddit uses that's causing the issue. What I find especially strange is that if you type anything into a comment <textarea> you will not see it anywhere in the DOM. How do I get the appended text reflected in the browser?

Answer 1

The problem is with your code. You do not use append() to add text to an input/textarea. You set the value.

// replaces it
$(HearthSearch_activeTextArea).value($(this).val());

// add to the end
var ta = $(HearthSearch_activeTextArea)
ta.value(ta.value() + $(this).val());

//or another way to do it without the extra varaible
$(HearthSearch_activeTextArea).val(function(i, text) {
  return text + quote;
});