How to create editable div using JavaScript ?
Last Updated :
31 Jul, 2024
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.
Similar Reads
How to create XML Dynamically using JavaScript?
XML stands for Extensible Markup Language. It is a popular format for storing and exchanging data on the web. It provides a structured way to represent data that is both human-readable and machine-readable. There are various approaches to create XML Dynamically using JavaScript: Table of Content Usi
2 min read
How to Create an Image Element using JavaScript?
We will dynamically create an <img> element in HTML using JavaScript. When a button is clicked, we'll generate the <img> element and append it to the document.Using createElement() methodCreate an empty img element using document.createElement() method.Then set its attributes like (src,
1 min read
How to create a FAQ page using JavaScript ?
The frequently Asked Questions (FAQ) section is one of the most important sections of any website, especially if you are providing services. If you want to learn how to make it by yourself then welcome! today we'll learn how to create a FAQ page using JavaScript. Functionalities required in a FAQ pa
6 min read
JavaScript- Edit a CSV File using JS
If you want to edit a CSV file using JavaScript, you can use the following methods depending on your environment (browser or Node.js). 1. Editing CSV in the BrowserIf you're working with a CSV file in the browser, you can use JavaScript to manipulate the CSV data (after converting it into a readable
3 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 Build Accordion Menu using JavaScript ?
Accordion is used to render or hide, or toggle the view of the content with the help of adding the collapsible effect. It helps to manage and organize information in a compact and visually appealing manner. Accordion Menu may contain nested accordions, in order to render a large volume of content in
4 min read
Create a Health Tracker using HTML CSS & JavaScript
In this article, we will see how we can create a health tracker using HTML, CSS, and JavaScript.Here, we have provided the user with three inputs i.e. input water intake, exercise duration, and blood sugar levels. The user can input these daily and then the provided data is stored in the localStorag
5 min read
How to Create Horizontal and Vertical Tabs using JavaScript ?
In this article, we will create Horizontal and Vertical Tabs using JavaScript.Tabs can be used for displaying large amounts of content on a single page in an organized manner. We can design single-page tabs using HTML, CSS, and JavaScript. HTML elements are used to design the structure of the tabs a
7 min read
Creating a Simple Image Editor using JavaScript
In this article, we will be creating a Simple Image Editor that can be used to adjust the image values like brightness, contrast, hue, saturation, grayscale, and sepia. Image editors allow one to quickly edit pictures after they have been captured for enhancing them or completely changing their look
10 min read
How to Change the ID of Element using JavaScript?
We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche
2 min read