How To Edit Text in HTML Paragraph?

Last Updated : 25 Oct, 2024

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
Updating Text Using JavaScript

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