How to create editable div using JavaScript ? Last Updated : 31 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 commandSyntax: $ touch index.html app.jsStep 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. Comment More infoAdvertise with us Next Article How to append data to element using JavaScript ? T thacker_shahid Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Misc Similar Reads How to append data to <div> element using JavaScript ? To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div. 1 min read How to append data to <div> element using JavaScript ? To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div. 1 min read How to append HTML code to a div using JavaScript ? The ability to append HTML code to a <div> Using JavaScript helps enhance user experience by enabling dynamic content updates without reloading the page. This technique is widely usedâover 85% of modern websites implement JavaScript DOM manipulation to create smoother and more interactive web 6 min read How to append HTML code to a div using JavaScript ? The ability to append HTML code to a <div> Using JavaScript helps enhance user experience by enabling dynamic content updates without reloading the page. This technique is widely usedâover 85% of modern websites implement JavaScript DOM manipulation to create smoother and more interactive web 6 min read How to create Edit icon using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Edit icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=âstylesheetâ href= 1 min read How to Set Cursor Position in Content-Editable Element using JavaScript? To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery 3 min read Like