How to change the Content of a <textarea> using JavaScript ?

Difficulty Level : Basic
Last Updated : 16 Oct, 2019

Given an HTML document containing a <textarea> element and the task is to change the content of a <textarea> element with the help of JavaScript.

Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is written within the <script> tag.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to change the Content of 
        a textarea using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        How to change the Content of a 
        <textarea> with JavaScript? 
    </h3> 
  
    <textarea id="textArea"> 
        A Computer Science Portal 
    </textarea> 
      
    <br><br> 
  
    <button onclick="changeContent()"> 
        Click to change 
    </button> 
  
    <script> 
      
        // JavaScript code to change 
        // the content of <textarea> 
        function changeContent() { 
            var x = document.getElementById('textArea'); 
            x.value = "GeeksforGeeks"; 
        } 
    </script> 
</body> 
  
</html>                              

Output:

Before clicking the button:
After clicking the button:

Method 2: This method uses the id attribute of the textarea with innerHTML property to change the content of <textarea> element. JavaScript code is written within the <script> tag.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to change the Content of 
        a textarea using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        How to change the Content of a 
        <textarea> with JavaScript? 
    </h3> 
  
    <textarea id="textArea"> 
        A Computer Science Portal 
    </textarea> 
      
    <br><br> 
  
    <button onclick="changeContent()"> 
        Click to change 
    </button> 
  
    <script> 
      
        // JavaScript code to change 
        // the content of <textarea> 
        function changeContent() { 
            document.getElementById('textArea').innerHTML 
                    = "GeeksforGeeks"; 
        } 
    </script> 
</body> 
  
</html>                            

Output:

Before clicking the button:
After clicking the button:

Method 3: This methd uses id attribute of the textarea with innerText property to change the content of <textarea> element. JavaScript code is between the <script> tag.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to change the Content of 
        a textarea using JavaScript? 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> 
        How to change the Content of a 
        <textarea> with JavaScript? 
    </h3> 
  
    <textarea id="textArea"> 
        A Computer Science Portal 
    </textarea> 
      
    <br><br> 
  
    <button onclick="changeContent()"> 
        Click to change 
    </button> 
  
    <script> 
      
        // JavaScript code to change 
        // the content of <textarea> 
        function changeContent() { 
            document.getElementById('textArea').innerText 
                    = "GeeksforGeeks"; 
        } 
    </script> 
</body> 
  
</html>                              

Output:

Before clicking the button:
After clicking the button:

My Personal Notes

Related Articles