Made withjQueryClip

JavaScript & jQuery Tutorial for Beginners - 7 of 9 - jQuery HTML Manipulation

T

tutor4u

Creator on the jQuery channel

Watch on YouTube ↗

77K viewsAug 26, 201213:21 runtime

Learn to dynamically manipulate your web pages with jQuery. This tutorial covers essential methods for changing HTML elements and attributes. Discover how to modify content using.text and.html, understanding the key difference when inserting HTML tags. Explore adding…

Chapters

#jquery#clip#frontend

Manipulating HTML with jQuery

This tutorial covers jQuery methods used to dynamically get, set, and manipulate HTML elements and their attributes.

Changing Content

.text(): Sets or returns the text content of selected elements. It will display any HTML tags as literal text.
.html(): Sets or returns the inner HTML (content including HTML markup) of selected elements. This method will render any HTML tags it is given.

Important
Use .text() when you want to insert plain text to prevent potential script injection. Use .html() only when you specifically need to render HTML markup from a trusted source.

Adding New Content

jQuery provides several methods to insert new content around existing elements.

Tip
append() and prepend() add content inside the selected element. after() and before() add content outside (as a sibling) to the selected element.

.append(): Inserts content at the end of the selected elements.
.prepend(): Inserts content at the beginning of the selected elements.
.after(): Inserts content after the selected elements.
.before(): Inserts content before the selected elements.

Removing & Replacing Content

.empty(): Removes all child nodes and content from the selected elements, leaving the elements themselves intact.
.replaceWith(): Replaces the selected elements entirely with the new content provided.

// Example: Replace all <p> elements with <h2> elements
$('p').replaceWith('<h2>New Heading</h2>');

Modifying Attributes

.attr(attributeName, value): Sets the value for a specific attribute on the selected elements.

// Example: Change the 'src' attribute of an image with id="picture"
$('#picture').attr('src', 'new-image.gif');

Note
When setting an attribute that itself requires quotes (like an inline style), you must use a different type of quote. The common practice is to use single quotes inside a string defined by double quotes: "<b style='color:red;'>Text</b>".

Introduction to jQuery HTML Manipulation

In this video I'll be covering jQuery HTML manipulation. This allows us to change the HTML elements and attributes of our document. Let's start by looking at the HTML document that we'll be using. We have an H1 tag followed by two P tags, and the H1 tag and the two P tags are enclosed inside this div element. And up here in the head section we have a style that changes the background color of the div element to yellow.

And here's the JavaScript code that we'll be using. As you can see, we are using a click event with the H1 element. So the code that we put right here will be run whenever the user clicks on our H1 element.

Changing Content with the .text() Method

So now let's add some code that will change the text of our H1 heading element when it's clicked. So we'll start with a selector and as usual we'll use a dollar sign followed by a pair of parentheses, and we want to specify the element that brought us here. So we'll use the keyword this. And remember that we don't use quotation marks when we use the keyword this.

The next we type .text() and then a pair of parentheses, and then we end the statement with a semicolon. This text method will allow us to change the text inside of an HTML element. So we're going to be entering a string here and we need to enclose this string inside quotation marks. And so let's just enter the word 'clicked'.

And so now what should happen is whenever we click on the H1 element, the text inside that HTML element will now change to the word 'clicked'. So let's try this out. So our H1 heading element right now just says 'Heading' and now when I click on it, the text changed to 'clicked'.

Targeting and Modifying Multiple Elements

Now since we use the keyword this right here, this changed the text of the H1 element that we clicked on. But now let's use the selector for P tags. So I just enclose a P in quotation marks. And now when I click on the H1 heading tag, the text for all of the P tags will be changed to 'clicked'.

So let's look at this. And so here in our browser, this first line of text and the second line of text are both P tags. And so when I click on the heading tag, the text in both of these P elements changed.

The Difference Between .text() and .html()

But what would happen if I were to try and include HTML text within this? For example, if I change this to 'new text' and then let's say that I wanted to make the word 'text' bold. So I would add the B tag and then close the B tag here.

So if my intent were to add the text 'new text' and to make the word 'text' bold, then this would not actually work. If we look at this in the browser we can see what would happen. So I'll click on the heading tag here and you can see that the text that was changed for the paragraph tag just displays the B tag, but it doesn't actually make the word text bold.

But if your intent was to actually display these HTML elements, then this is how you would do it. But let's say that you did not want to display these elements, that you actually wanted to use these elements to make the word 'text' bold. I'll show you how to do that. You can do that by changing this text method to html.

Adding Attributes and Handling Nested Quotes

So let's try this in the browser. I'll click on the heading tag and now you can see that it did not display the B tag, but it actually used the B tag to make the word text bold. So this is how you can actually insert more HTML tags within an element like the paragraph element here. And not only can you add HTML tags this way, but you can even give them attributes. For example, for this B tag, I'll add a style attribute. For this style, I'll set the color to red.

Now there's something important here that I need to point out. For this style we use quotation marks, but we already have a set of quotation marks here. The JavaScript does not allow you to enclose a pair of quotation marks inside of another pair of quotation marks that are the same type of quotation marks. So the way to solve this is we can use single quotation marks. So I can change this quotation mark right here to a single quotation mark, and then the matching quotation mark over here is also changed to a single quotation mark. And now this will work just fine.

So let's take a look at this in the browser. So I'll click on the H1 heading element and we can see that the word 'text' is not only bold but the color was changed to red.

Replacing Content in a Container Element

And so now let's come back over here and instead of applying this to the P element, let's apply it to the div element. And if you recall, in our HTML code, our H1 tag and these two P tags were all enclosed within this div element. So now when we click on the H1 heading element in our browser, all of these tags right here will be replaced with this right here. So let's look at this in the browser. I'll click on the heading element and you can see that now everything within the div element was replaced.

Removing All Content with .empty()

And we can also remove everything from an element. So let's come back over here and delete all of this and then type empty and follow that with a pair of parentheses. This will remove everything from our div element when the user clicks on the H1 heading. So let's take a look at this. So I'll click on the H1 heading and then everything within that div was removed.

Adding Content with .append()

So now let's say that instead of removing elements or instead of replacing elements, we want to append some HTML. So we can do that by using the append method. So let's change our selector from div to P so we can select the P elements. And then we want to append a string of text. So we enclose this in quotation marks and I'll type in a string that says 'more text'. And let's try this out.

So our paragraph tags already say 'first line of text' and 'second line of text'. Now I'll click on our heading element and here you can see that we've appended the words 'more text'. But we can also append HTML code. So let's come back over here and change our selector from P to div, and then we'll still use the append method here, but in the quotation marks I'm going to add some HTML code. So I'll add a paragraph element and I'll just type 'new text' and then I'll close the paragraph element. And now let's look at this.

Inserting with .after(), .prepend(), and .before()

So I'll click on our heading element and you can see that 'new txt' was appended to the end of this div. And if you recall back in our HTML code, we have a style set for the div that sets the background color to yellow. So over here in the browser you can see that the new text was appended to the end of the div but it's still included inside of the div, and we can tell that because the background of the div is set to yellow.

But what if we wanted this new text to be on the outside of the div instead of inside of the div? We can do that if we change the word append to after. And now when we look at this in the browser and I click on the H1 heading element, we can see that the new text was added after the div. And we can tell that because again, the background color of the div is set to yellow. So now let's go back over here and change our div selector to a P selector and let's look at this.

So here we already have two P elements: the first line of text and the second line of text. So now I'll click our heading element. Now this added our new text after the first line of text and it also added it after our second line of text. So you can use this to add HTML code after multiple elements. We can also add HTML code using the prepend method. And let's change our selector back to div again and let's look at this in the browser. Now when I click on the H1 heading element, we can see that it added text to the beginning of the div element. And again, this is inside the div element, and we can tell that because of the yellow background. Now if we wanted to add the text before the div element instead of including it within the div element, we can change the word prepend to before. And so let's look at this. So I'll click on the H1 heading element and now our text was added before the div.

Replacing Elements with .replaceWith()

And now I'll show you how we can replace some HTML code. To do this, we use a method called replaceWith. And you should note that the W here is capitalized. And let's change our selector from div to P. And what we want to do is to replace our P tags with H2 tags. So I'll change this P tag here to an H2 tag and then I'll also close the H2 tag here. And now let's look at this in the browser. So I'll click on the H1 heading element and now our two P elements changed to 2 H2 elements.

Modifying Attributes with .attr()

And now we'll look at how to change an attribute of an element. So for this, we're going to make a change to our HTML code, and I'm going to remove both of these P elements here and I'm going to replace it with an image element. So this tag will just load in an image called 8-ball and notice here that I have the ID attribute set and I have it set to a value of 'picture'. So now let's go back to our JavaScript code. And here we're going to change the selector and we want to use a selector for our image. And since I set the image ID attribute to 'picture', I'll just use the selector for that ID value. So to specify an ID, I start out by using a pound sign, and then I just type the name of the ID attribute which is 'picture'.

Now to change an attribute we need to change this method to attr. And then let me get rid of everything inside these parentheses here. And then we need to first specify the attribute that we want to change, and so we'll be changing the source attribute. So I enclose that in quotation marks and then I put a comma outside of the quotation marks and I specify the new value that I want to change the source attribute to. And I'll put that in quotation marks, and this will be called floating ball gif. So now when we click on the H1 heading element, it'll change the source attribute to floating ball gif, which will change the picture. So let's take a look at this in the browser.

We can see that we have the image of the eight ball and now when I click on the heading element, it changes to the image of the floating ball.

Conclusion

Well that concludes this video. For more information on jQuery HTML manipulation visit jQuery.com, and you can find the sample code used in this video at littlewebhut.com. Thanks for watching and please subscribe and leave a comment.