How to Add contentEditable attribute to <p> element using JavaScript and jQuery

Last updated: 18th July 2025

In this post, you'll learn how to make HTML elements editable directly in the browser using the contentEditable attribute. I’ll walk you through two practical examples, one using plain JavaScript and the other using jQuery, to dynamically add the contentEditable property to a <p> element.

What Is contentEditable?

The contentEditable attribute is a powerful HTML5 feature that allows you to turn any element into an editable field. When set to "true", users can click inside the element and start typing, just like a text box. It’s commonly used in custom text editors, note-taking apps, and rich content interfaces where flexibility is key.

1) Add attribute contentEditable using JavaScript

Let’s say you have a <p> element on your web page and you want users to be able to edit its content directly in the browser, without using a form or input field. You can achieve this by dynamically adding the contentEditable attribute using JavaScript.

<p id='theEle'>
    Some text here … 	
</p>

The JavaScript code:

<script>
    document.getElementById('theEle).contentEditable = 'true';
</script>

Try it

It really is that simple, just one line of code can make any HTML element editable in the browser. The contentEditable attribute accepts a Boolean value: set it to "true" to enable editing, or "false" to disable it. This makes it incredibly easy to toggle editability on the fly.

Now let’s explore how to dynamically toggle the contentEditable attribute using JavaScript. This technique is especially useful when you want to switch between read-only and editable modes based on user interaction.

<p id='theEle' contentEditable></p>
<input type='button' onclick='setP()' value='click to make P editable' id='bt' />

<script>
    let setP = () => {
        let val = document.getElementById('theEle');

        if (val.contentEditable === 'true') 
            document.getElementById('theEle').contentEditable = 'false';
        else
            document.getElementById('theEle').contentEditable = 'true';
    }
</script>

Try it

Or, use Logical Operators.

let setP = () => {
    let val = document.getElementById('theEle');

    val.contentEditable === 'true' ? 
        document.getElementById('theEle').contentEditable = 'false'
        :
        document.getElementById('theEle').contentEditable = 'true';
}

2) Add attribute contentEditable using jQuery

Here’s how you can dynamically apply the contentEditable attribute to a <p> element using jQuery. This method allows you to make the paragraph editable in real time, enabling users to modify its content directly in the browser, perfect for building interactive web applications or custom text editors.

<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <p id='theEle'></p>
    <input type='button' onclick='setP()' value='Click it' id='bt' />
</body>

<script>
    $(document).ready(function () {
        $('#bt').click(function () {
            $('#theEle')
            	.attr('contenteditable', 'true')
                .focus();
        });
    });
</script>
</html>

Try it

In this example, I’m using jQuery's .attr() method to assign a value to the contentEditable attribute, making the element editable in the browser. Alternatively, jQuery's .prop() method can also be used to manipulate Boolean attributes like contentEditable, depending on your preference or coding style.

🚀 Try It Live: My Fancy Notepad

Want to see contentEditable in action? Check out 📝 My Fancy Notepad, a free online text editor built entirely with HTML5’s "contentEditable" feature. It lets you:

• Type and format rich text directly in your browser
• Upload images and adjust font styles
• Export your notes as a text file or PDF
• Use it without any login or installation

Whether you're a developer, student, or casual user, it's a great example of how contentEditable can power intuitive, browser-based editing experiences.

← PreviousNext →