John Mwaniki /   02 Dec 2023

How to Insert or Edit Content in HTML Elements using jQuery

Dynamically modifying web page content after it loads is a crucial aspect of creating interactive and engaging user experiences.

This often involves manipulating existing HTML elements, either by replacing their content entirely or adding additional information before or after their already existing content.

For instance, on social media sites/apps such as Facebook, Twitter, etc, you never get to reach the end of the newsfeed. The more you scroll, the more posts/tweets you see. Even if you were to scroll the entire day, this remains the case.

It doesn't mean that all the content was loaded at the beginning when opening the page. The loading happens dynamically and seamlessly as you continue to scroll, which is referred to as "infinite scroll".

Another example is when liking, commenting, or replying to comments on posts. The comment or reply appears immediately and automatically as is when you post or edit it without reloading the page.

You may also have noticed that websites with sports live scores keep updating stats every other second without reloading the page.

All these enhance the user experience and make web applications feel more responsive with real-time information.

Suppose you rely on data from external sources, like APIs or databases, or user inputs and interactions to display it on the web page. In that case, you need JavaScript to inject it into the HTML page using DOM (Document Object Model) manipulation.

In this article, I'll show you how to modify or insert content into HTML elements using jQuery, a fast and lightweight JavaScript library.

Loading jQuery on the Page

I guess you already know this. But just in case you are new, you need to include and load the jQuery library on your page before you can add jQuery code. You can either download it and include it in your project or use a Content Delivery Network (CDN). For example:

<!-- Include jQuery from CDN -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

Replacing Content in an HTML Element

To replace the entire content of the selected element with new content, we use the jQuery .html() or .text() methods.

1. Using the .html() method

The .html() method replaces the content of the selected element(s) with HTML or text content.

Example

<div id="mydiv">Old content></div>

<script>
$(function(){
    $("#mydiv").html("<h1>New heading</h1><p>New Paragraph</p>");
});
</script>

In this example, we have used "#mydiv" as the selector for a div with "mydiv" as its ID attribute value. Then have passed HTML content comprising an h1 heading and a paragraph as the argument, which replaces its existing content ("Hello World!").

2. Using the .text() method

The .text() method allows you to replace the entire content within an HTML element with the provided text content.

Example

<p id="myElement">Hello World!></p>

<script>
$(function(){
    $("#myElement").text("New Text Content");
});
</script>

The only difference with the previous method is that we cannot pass HTML content. It works with only text content as a replacement.

Adding Content to an HTML Element

To add extra content to an HTML element without replacing its existing content in jQuery, we use the .append() and .prepend() methods.

1. Using the .append() method

The .append() method inserts the specified content after the existing content of the selected element(s).

Example

<ul class="my-list">
<li>Banana</li>
<li>Orange</li>
<li>Avocado</li>
</ul>

<script>
$(function(){
    $(".my-list").append("<li>Apple</li>");
});
</script>

In this example, we have added a list item to the end of the list element (<ul>) with the class name "my-list".

2. Using the .prepend() method

The .prepend() method is similar to .append(), only that it inserts the provided content before the existing content of the selected element(s).

Example

<ul class="my-list">
<li>Banana</li>
<li>Orange</li>
<li>Avocado</li>
</ul>

<script>
$(function(){
    $(".my-list").prepend("<li>Apple</li>");
});
</script>

Adding Content Before or After an Element

For more specific situations, jQuery offers additional methods to add content in the context of an element.

Using the .before() and .after() methods, you can insert content immediately before or after a specified HTML element.

1. Using the .before() method

The .before() method inserts the specified content before the selected element(s).

Example

<ul class="my-list">
<li>Banana</li>
<li>Orange</li>
<li>Avocado</li>
</ul>

<script>
$(function(){
    $(".my-list").before("<h2>Nutrious Fruits</h2>");
});
</script>

This will add a h2 heading with the text "Nutrious Fruits" just before the list element (element with className "my-list").

2. Using the .after() method

This function inserts the specified content after the selected element(s).

<script>
$(function(){
    $("div").after("<hr>");
});
</script>

This will add a horizontal rule element after each div element on the page.

Choosing the Right Method

Understanding the different methods and their functionalities is crucial for choosing the appropriate one for your needs. Here's a quick comparison:

By using the appropriate method, you can efficiently and dynamically manipulate HTML content to create a more interactive and engaging user experience in your web pages.

Ensure you use the appropriate selectors to target the specific elements you want to modify.

Lastly, test your code thoroughly to ensure HTML content manipulation doesn't mess with your page layout.