Skip to content
Related Articles

Related Articles

Improve Article
How to create editable div using JavaScript ?
  • Last Updated : 13 Oct, 2020

In this article, we will be explaining to you how to create an editable div using HTML, CSS, and JavaScript. An editable div is one on which is you will click then it will generate an editable text area to edit or to write any text on your browser itself. After editing, when you click on somewhere else on your browser then that text will be displayed as a constant text (without editable).

Prerequisites: You should be familiar with the basics of HTML, CSS, and JavaScript.

Creating structure: Create two files for HTML, and JavaScript. To create these files run the following command

  • Syntax: 
    $ touch index.html app.js
  • Step 1: Edit index.html. This file contains the following Code.

    HTML




    <!DOCTYPE html>
    <html lang="en">
        
        <body>
      
            <h1 style="color: green;  
                       text-align: center;">
                Creating Editable Div GeeksforGeeks
            </h1>
      
            <div style="text-align: center; 
                        margin-left: 35%;" 
                 class="container">
                <div id="first"></div>
            </div>
      
        </body>
        
        <script src="app.js"></script>
    </html>
  • Step 2: Edit the app.js file. This file contains the  following Code.

    Javascript






    // Creating a new element
      
    let editableDiv = document.createElement('div');
              
    // Adding text to that created element
      
    let value = localStorage.getItem('text');   
    let text;
      
    if (value == null){
        text = document.createTextNode
        ('Click on it to edit this Editable Div');
    }
    else{
        text = document.createTextNode(value);
    }
      
    editableDiv.appendChild(text);
    editableDiv.setAttribute('id', 'elem');
    editableDiv.setAttribute('class', 'elem');
    editableDiv.setAttribute('style',
    'font-size:3rem;border:3px solid;
     width:350px;height:200px;');
      
    // Access the main container
      
    let container = document.querySelector('.container');
      
    // Inserting the element with id = first
      
    container.insertBefore(editableDiv, first);
      
    // Adding event listener to the divElem
      
    editableDiv.addEventListener('click',function (){
      
    let lengthOfTextAreas = 
        document.getElementsByClassName('textarea').length;
                          
    if(lengthOfTextAreas == 0){
        let html = elem.innerHTML;
        editableDiv.innerHTML =
      
        `<textarea class="textarea form-control" 
        id="textarea" rows="3"
        ${html}</textarea>`;
    }
      
    // Listening the blur event on textarea
      
    let textarea = document.getElementById('textarea');
      
    textarea.addEventListener('blur',function() {
        elem.innerHTML = textarea.value;
        localStorage.setItem(
        'text', textarea.value); 
      
        })
    });

      Final Solution: This is the combination of the above two steps.

      HTML




      <!DOCTYPE html>
      <html lang="en">
          
          <body>
        
              <h1 style="color: green;  
                         text-align: center;">
                  Creating Editable Div GeeksforGeeks
              </h1>
        
              <div style="text-align: center; 
                          margin-left: 35%;" 
                   class="container">
                  <div id="first"></div>
              </div>
        
          </body>
            
          <script>
        
              // Creating a new element
        
                  let editableDiv = document.createElement('div');
                    
                  // Adding text to that created element
                    
                  let value = localStorage.getItem('text');   
                  let text;
                    
                  if (value == null){
                      text = document.createTextNode
                      ('Click on it to edit this Editable Div');
                  }
                  else{
                      text = document.createTextNode(value);
                  }
                    
                  editableDiv.appendChild(text);
                  editableDiv.setAttribute('id', 'elem');
                  editableDiv.setAttribute('class', 'elem');
                  editableDiv.setAttribute('style',
                  'font-size:3rem;border:3px solid;
                   width:350px;height:200px;');
                    
                  // Access the main container
                    
                  let container = document.querySelector('.container');
                    
                  // Inserting the element with id = first
                    
                  container.insertBefore(editableDiv, first);
                    
                  // Adding event listener to the divElem
                    
                  editableDiv.addEventListener('click',function (){
                    
                  let lengthOfTextAreas = 
                      document.getElementsByClassName('textarea').length;
                                        
                  if(lengthOfTextAreas == 0){
                      let html = elem.innerHTML;
                      editableDiv.innerHTML =
                    
                     `<textarea class="textarea form-control" 
                      id="textarea" rows="3"
                      ${html}</textarea>`;
                  }
                    
                  // Listening the blur event on textarea
                    
                  let textarea = document.getElementById('textarea');
                    
                  textarea.addEventListener('blur',function() {
                      elem.innerHTML = textarea.value;
                      localStorage.setItem(
                     'text', textarea.value); 
                    
                      })
                  }); 
                      
          </script>
        
      </html>

      Output: When you will open it on any browser then the following output would be generated.




      My Personal Notes arrow_drop_up
Recommended Articles
Page :