Manipulating Content on a Page


In this lesson, you will learn how to manipulate content and elements on a web page from simply replacing HTML element to completing removing tags and content from the web page.

How do you manipulate content on a page using jQuery?

Below are the most used jQuery functions that let you manipulate the content on the page:

.html()

This function lets you interact with the current element’s HTML. You can replace the existing content with some other content as well.

To access the HTML currently inside the element, bind .html() function with the element being selected. For example, the following <div> is empty, but you can add content within <div> tag using jQuery. When you use the .html() function, you make a copy of the HTML inside a specific element. You can also replace the existing content inside the selection.

<div id="message"></div>
$(document).ready(function(){
$('#message').html("<h2>Hi!</h2><br> Lets add some content.");
});

The Output

.html() Function Example

.text()

This function works like .html(), but it doesn’t show HTML tags. It is used when you want to replace a text string within a tag. If you use the same string with .text() function like this:

$(document).ready(function(){
$('#message').html("<h2>Hi!</h2>Lets add some content.");
});

The output

.text() Function Example

jQuery will encode any HTML tag being passed to the text() function, so this would be translated as <h2>Hi!</h2>. This will come in handy when you don’t want to use HTML tags or want to display the tag names on the page.

.append() 

This function allows you to add HTML as the last child element of the element being selected. For example, you select a <div> tag, but instead of replacing the content (as with .html() or .text() functions) you want to append some HTML before the closing </div> tag.

<ul id="juice_menu">
<li>Mango Juice</li>
<li>Apple Juice</li>
<li>Pineapple Juice</li>
<li>Watermelon Juice</li>
</ul>

As you can see, the unordered list created has only four items. You can add another item at the end of the list by using jQuery as the following code.

$(document).ready(function(){
$('#juice_menu').append("<li>Orange </li>");
});
.append() Function Example

.prepend()

This function is similar to the.append(), but adds HTML just after the opening tag. For example, to add a new item in the above list, use the following piece of code.

The HTML code will remain the same. The new item will be added using jQuery.

$(document).ready(function(){
$('#juice_menu').prepend("<li>Stawbery Juice </li>");
});
.prepend() Function Example

.remove()

If you want to remove the HTML tag from the page, use jQuery remove() function. Let’s say that you want to remove a tag with an id “dialogbox,” you can use the following code to delete it.

$(“#dialogbox”).remove();

This .remove() function isn’t limited to just one element. Let’s say you want to remove all <span> tags from your web page, you can do so using the following piece of code.

$(“span”).remove();

.replaceWith()

You can also replace the selected element with the new content or element. For example, let’s say you have an image, and when the user clicks on that image, you want to replace it with a text string. You can do so by using the jQuery replaceWith() function.

$(“img .old_logo”).replaceWith(<p>New logo Coming Soon!</p>');
Chaining in jQuery Tutorial Home CSS and jQuery

 

Tutorials Panel

About Tutorials Panel

programming tutorial and source code for Software Engineers and developers. https://twitter.com/TutorialsPanel

View all posts by Tutorials Panel →

Leave a Reply