Open In App

How To Edit Text in HTML Paragraph?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
3 Likes
Like
Report

To edit the text in an HTML paragraph, you can do it by directly editing the HTML file or dynamically using JavaScript or by using contenteditable Attributes.

Directly Editing the HTML File

The simplest way to change the text of a paragraph is to edit it directly in the HTML file. This is useful when you want to make static changes that do not require any interactivity. Locate the paragraph in your HTML file. Change the text content between the <p> and </p> tags.

Syntax

<p>This is the new text for the paragraph.</p>

Example: Changing the paragraph content directly in the HTML.

HTML 
<body>
    <h3>GeeksforGeeks</h3>
    <p>
      	This paragraph has been 
      	updated directly in the HTML file.
  	</p>
</body>

Output

edit-text-html
Edit Text in HTML Paragraph

Alternative Approaches to Edit Text Dynamically

Table of Content

Using the contenteditable Attribute

The contenteditable attribute can make any HTML element editable, allowing users to edit the paragraph text directly on the web page.

Add the contenteditable="true" attribute to the paragraph tag. Users can click on the paragraph and edit the text.

Syntax

<p contenteditable="true">Click to edit this paragraph.</p>

Example: Making a paragraph editable in the browser.

HTML 
<body>
    <h3>GeeksforGeeks</h3>
    <p contenteditable="true">
      	You can edit this paragraph. Just click on 
      	it and start typing!
  	</p>
</body>

Output

edit-tag-attribute
Edit Text in HTML Paragraph

Updating Text Using JavaScript

You can use JavaScript to change the content of a paragraph dynamically. This approach is helpful when you want to modify the text based on user actions or other events.

Syntax

document.getElementById("myParagraph").textContent =
    "This is the new paragraph text.";

Example: Changing the paragraph text with JavaScript.

HTML 
<body>
    <p id="myParagraph">
        Original text of the paragraph.
    </p>
    <button onclick="changeText()">
        Change Text
    </button>

    <script>
        function changeText() {
            document.getElementById("myParagraph").textContent =
                "The paragraph text has been changed!";
        }
    </script>
</body>

Output

edit-text-javascript
Edit Text in HTML Paragraph

Which Approach Is Better in Different Cases?

  • Editing the HTML File Directly: Ideal for static content that does not need to be updated dynamically.
  • JavaScript: Best for changing content based on user interaction or other events.
  • contenteditable Attribute: Useful for creating a live editing experience, such as in content management systems or text editors.

P

pankaj2025
Improve
Article Tags :

Explore

Lightbox