Append text to textarea with javascript

Question

How can I append a list of text into a textarea?

var Alltext = "";

function addText(text) {
  Alltext += text
}
document.getElementById("alltext").value = Alltext;

<textarea id="alltext"></textarea>

<ol>
  <li onclick="addText('Hello')">Hello</li>
  <li onclick="addText('World')">World</li>
  <li onclick="addText('Earthlings')">Earthlings</li>
</ol>

This is quite inefficient, as the list is actually very long. The text added is exactly the value I see in the HTML, so I assume there's no need to type it twice.

Are there any better methods?

So are you looking for a means to add the text as many here have answered, or are you looking for a means to build the list in code instead of manually? — Ben Felda
– Ben Felda, Commented Jan 21, 2013 at 18:42
the system had the answer for this. Thanks for the time to read! — Emerson F
– Emerson F, Commented Jan 21, 2013 at 18:56
You can also use setRangeText (), to append text to the TextArea. e.g. textArea.setRangeText (newText, textArea.textLength, textArea.textLength); — Venkata Raju
– Venkata Raju, Commented Aug 20 at 10:52

vsync · Accepted Answer · 2019-09-06 19:22:31Z

95

Use event delegation by assigning the onclick to the <ol>. Then pass the event object as the argument, and using that, grab the text from the clicked element.

function addText(event) {
    var targ = event.target || event.srcElement;
    document.getElementById("alltext").value += targ.textContent || targ.innerText;
}

<textarea id="alltext"></textarea>

<ol onclick="addText(event)">
  <li>Hello</li>
  <li>World</li>
  <li>Earthlings</li>
</ol>

Note that this method of passing the event object works in older IE as well as W3 compliant systems.

edited Sep 6, 2019 at 19:22

vsync

133k61 gold badges345 silver badges430 bronze badges

answered Jan 21, 2013 at 18:35

the system

9,36642 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emerson F Over a year ago

I think this nailed it. Thank you for your kind patience!

Kamil Dzieniszewski Over a year ago

Do you think there is a possibility to add word in the middle of the text?

Naeem Akhtar · Accepted Answer · 2025-08-19 15:44:39Z

11

Give this a try:

$(document).ready(function() {
  $("li").click(function() {
    $('#alltext').append($(this).text());
  });
});

li:hover {
  cursor: hand;
  cursor: pointer;
}

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

<h2>List items</h2>
<ol>
  <li>Hello</li>
  <li>World</li>
  <li>Earthlings</li>
</ol>
<form>
  <textarea id="alltext"></textarea>
</form>

edited Aug 19 at 15:44

Naeem Akhtar

1,6531 gold badge16 silver badges24 bronze badges

answered Jan 21, 2013 at 18:41

Carl

5212 silver badges7 bronze badges

3 Comments

the system Over a year ago

Using jQuery for this tiny task would be massive overkill.

Emerson F Over a year ago

Thanks Carl, but I would prefer not to use jquery.. Thanks a million for your time anyway!

abarisone Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".

Collectives™ on Stack Overflow

Append text to textarea with javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related