color values in a text area

Question

I want to fill a text area with values in a list obtained from Ajax request in a django app. Here is the list returned

{"listforeign": ["t", "t", "t", "g", "g", "g", "o"]}

here is the textarea where it goes.

<textarea rows="10" name="BaseP" id="id_BaseP" placeholder="Paste text here ..."
 cols="40" class="textarea">

The problem is

1. Append the values from the listforeign into the text area.

2. the element "o" should be in color red

any help?

Answer 1

All text in a textarea element will render with the same color, font etc. You cannot style a character or a word etc. differently.

As an alternative, try using a contentEditable DIV and serve out the o inside a span with a defined text color.

Docs: https://developer.mozilla.org/en-US/docs/HTML/Content_Editable

Answer 2

Problem 1:

To append values to a textarea, use the .val()-function from jQuery.

From Set value of textarea in jQuery:

$("textarea#id_BaseP").val(json);

To parse the JSON you have, use JavaScript's JSON-parser. From http://www.json.org/js.html:

var myObject = JSON.parse(myJSONtext)

The created object has the JSON-data as its fields.