Write a newline in a textarea with Javascript

Question

I am writing a little JS script which produces an output on multiple lines, and I want to display this output in a textarea with id message. I know that a textarea does not interpret html. Since the textarea is a form tag, I tried the following to display my result:

• $("#message").val("test\\ntest"); writes test\ntest in the textarea
• $("#message").val("test
test"); writes test
test in the textarea

But since it is also an open-close tag, I assumed that the .html() attribute was valid on it, and it seems to be, but when I do the following:

• $("#message").html("test\\ntest");
• $("#message").html("test
test");

it does not update anything visible in the textarea, but when I look into the console and inspect the element, I see the well formated text between the two tags.

The only way I was able to do it is the write directly the text in the textarea, like so:

<textarea id="message>test&#13;&#10;test</textarea>

which produces a well formated output, but since I want my JS script to update it it is not relevant.

I read a lot of topics and suggestions, but none seems to answer to my specific question: Is there any way I can modify in Javascript the value of a textarea displaying text on multiple lines?

tl;dr

I tried the following (fill all the textareas before testing):

$("#button").click( function() {
  $("#ta1").val("test\\ntest");
  $("#ta2").val("test
test");
  $("#ta3").html("test\\ntest");
  $("#ta4").html("test
test");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Fill all the textareas before testing</p>
<button id="button">Test</button>

<p>Test 1 : </p>
<textarea id="ta1"></textarea></br>
<p>Test 2 : </p>
<textarea id="ta2"></textarea></br>
<p>Test 3 : </p>
<textarea id="ta3"></textarea></br>
<p>Test 4 : </p>
<textarea id="ta4"></textarea></br>
<p>Test 5 : </p>
<textarea id="ta5">test&#13;&#10;test</textarea>

and none of thoses tests are allowing me to replace the textarea value with multiline text.

Do you have a solution ?

Answer 1

As JJJ correctly states in comments, just include \n in the value:

$("#button").click( function() {
  $("#ta1").val("test\ntest");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="button">Test</button>

<p>Test:</p>
<textarea id="ta1"></textarea>

Your attempts fail because:

• "\\" is interpreted as a backslash in a string, then n is just a "n". There is no newline.
• val will not interpret HTML.
• same as the first case
• This actually works - for the initial value. When <textarea> is initialised, its value is its content. After it is first edited, it's the value property that matters, and the content is not relevant any more. Which is why it works if you haven't edited the <textarea>, but not if you did.

The first case was closest to working, you just went overboard with backslashes.