In this section, we will learn what the Element contentEditable property is and how to use it in JavaScript.

HTML ContentEditable

When you open an HTML document in a browser, by default you’re not able to edit the content you see on that page. But HTML provided a property named `contenteditable` and if we apply this attribute to an element, that becomes editable. This means you can add or remove its content right on the page itself and without going through the source code.

You can learn more about this attribute in the HTML contenteditable attribute section.

What is Element contentEditable Property in JavaScript?

The JavaScript Element contentEditable property is used to set or get the value of the contenteditable attribute.

Basically, using this property we can programmatically make an HTML element editable.

Element contentEditable Property Syntax:

element.contentEditable;

element.contentEditable = true|false;

Element contentEditable Property Input Value

The value of this property is either true or false.

We put the value false if we don’t want the element to become editable. The value true, means the content should become editable.

Element contentEditable Property Return Value

The return value of this method is a boolean value.

The value true, means the target element is editable. And the value false means otherwise.

Example: using contentEditable Property in JavaScript

See the Pen using contentEditable Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.