Set or update value of textarea with JavaScript/jQuery
This post will discuss how to set or update the value of textarea in JavaScript and jQuery.
1. Using JavaScript
With plain JavaScript, you can use either innerHTML, innerText or textContent to write text inside a textarea.
JS
|
1 2 3 |
document.getElementById('submit').onclick = function() { document.getElementById('story').innerHTML = 'It was a dark and stormy night…'; } |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <body> <div> <label for="story">Tell us your story:</label> <textarea id="story" name="story" rows="5" cols="33"></textarea> </div> <div> <button id="submit">Populate Sample Text</button> </div> </body> </html> |
The innerText property will escape the specified text so that it will render correctly in HTML.
The innerHTML property won’t escape the text, which can lead to XSS attacks.
The textContent property offers better performance since its value is not parsed as HTML, and it also prevents XSS attacks.
2. Using jQuery
With jQuery, you can use the .text() method to replace the textarea’s text.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $('#story').text('It was a dark and stormy night…'); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <body> <div> <label for="story">Tell us your story:</label> <textarea id="story" name="story" rows="5" cols="33"></textarea> </div> <div> <button id="submit">Populate Sample Text</button> </div> </body> </html> |
Alternatively, you can use jQuery’s .html() method, which uses the browser’s innerHTML property to replace textarea content with the new content completely.
Another good solution is to use the .val() method to set the text value of the textarea element.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $('#story').val('It was a dark and stormy night…'); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <body> <div> <label for="story">Tell us your story:</label> <textarea id="story" name="story" rows="5" cols="33"></textarea> </div> <div> <button id="submit">Populate Sample Text</button> </div> </body> </html> |
To insert text at the end of a textarea, you can use the .append() method:
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('#submit').click(function() { $('#story').append('…'); }) }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <body> <div> <label for="story">Tell us your story:</label> <textarea id="story" name="story" rows="5" cols="33">It was a dark and stormy night</textarea> </div> <div> <button id="submit">Append Text</button> </div> </body> </html> |
That’s all about setting or updating the value of textarea in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)