Append text to textarea with javascript

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

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

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

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

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

Is there any better methods?



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.srcElement;
    document.getElementById("alltext").value += targ.textContent || targ.innerText;
<textarea id="alltext"></textarea>

<ol onclick="addText(event)">

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


Give this a try:

<!DOCTYPE html>
    <title>List Test</title>
        li:hover {
            cursor: hand; cursor: pointer;
    <script src=""></script>

    <h2>List items</h2>
        <textarea id="alltext"></textarea>


Tray to add text with html value to textarea but it wil not works

value :

$(document).on('click', '.edit_targets_btn', function() {
            $('#targets_modal_title').text('Doel bijwerken');


                selector: '#targets_content',
                setup: function (editor) {
                    editor.on('change', function () {
                browser_spellcheck : true,
                plugins: ['advlist autolink lists image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount', 'autoresize'],
                toolbar: 'undo redo | formatselect | ' + ' bold italic backcolor | alignleft aligncenter ' + ' alignright alignjustify | bullist numlist outdent indent |' + ' removeformat | image | help',
                relative_urls : false,
                remove_script_host : false,
                image_list: [<?php $stmt = $db->query('SELECT * FROM images WHERE users_id = ' . $get_user_users_id); foreach ($stmt as $row) { ?>{title: '<?=$row['name']?>', value: '<?=$imgurl?>/image_uploads/<?=$row['src']?>'},<?php } ?>],
                min_height: 250,
                branding: false


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.