Oftentimes, we need to modify things on the website to see how it looks. In such a case, making elements editable may be required. To do so, the HTML DOM “contentEditable” element can be utilized. This element is used as an attribute in the HTML element. Moreover, the element which is associated with this attribute can be edited or modified on the web page.

This write-up will provide a guide on the HTML DOM element contentEditable property.

How to Make an Element Editable in HTML?

The HTML “contentEditable” property is utilized to identify whether or not the element’s content is editable. This property returns a boolean value where the “true” value signifies the element is editable, and the “false” indicates the content is not editable. This property can be utilized with any element.

Example: How to Add “contenteditable” attribute in HTML Elements?
In HTML, firstly, specify a heading element <h2> to include a heading to the document. Then, add an HTML <p> element associated with the attributes:

• id: This attribute is utilized to uniquely identify the element, accessed in CSS and JavaScript.
• contenteditable: An attribute that signifies whether the HTML element is editable or not. It is a boolean attribute.

At last, add one more <p> element with the id “result”, which will be displayed after the JavaScript manipulation:

Let’s apply JavaScript to display the value of the contenteditable attribute with the help of the “contentEditable” property.

JavaScript

Here is the explanation of the above-stated code:

• Within the HTML <script> element, create a variable “answer” using the keyword “var”.
• Then, fetch the element having the id “para” and make it editable with the “contentEditable” property.
• To embed the boolean value of the contentEditable property in the <p> element with the id “result”, specify the “document.getElementById()” function with the id of the <p> tag as its parameter.
• The “innerHTML” property returns or specifies the HTML content of an element where the result needs to be embedded.
• The value of the “answer” variable is assigned to the element having the id “result”.

It can be seen that the paragraph element is now editable:

Let’s apply some CSS properties to the HTML, as mentioned above.

Style “content” div

The div element with the class name “content” is applied with the following CSS properties:

• “width” property determines the element’s width.
• “height” adjusts the element’s height.
• “background-color” applies a color to the element’s background.
• “margin” with the value set as “0 auto” identifies no space on the top-bottom and equivalent space on the element’s left and right sides.
• “padding” property adds space at all sides of the element’s content or inside the border.

Style “h2” Element

The “background-color” and “padding” properties work as described above.

Style “p” Element

Below are the properties applied to the “p” element of the “content” div:

• “font-size” property sets the element’s font size.
• “cursor” property with the value “pointer” sets the cursor as a hand with a pointing finger.

Here is the final look at the above-created page:

Example: The “contenteditable” Attribute With “false” Value
Below given code represents that the value of the “contenteditable” attribute is set as “false”:

From the given output, it can be verified that the element is not editable:

This is how the contentEditable property works.

Conclusion

In HTML, the “contenteditable” attribute is utilized to make the elements editable. It is a boolean attribute having a true or false value. The “contentEditable” property in JavaScript can be utilized to access this attribute’s value. This blog guided about the HTML DOM element contentEditable property with examples.