How to create editable div using JavaScript ? - GeeksforGeeks

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
$ touch index.html app.js
Step 1: Edit index.html. This file contains the following Code.HTMLHTML<!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>
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.JavascriptJavascript// 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.HTMLHTML<!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_upSave
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.
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?