Jquery setting a content

12-01-2023

First, we need to have an HTML page containing an a tag, for example:


<a href="http://www.example.com">Original link content</a>.

Next, we can use the text() method in the jQuery library to modify the content in the a tag. The text() method can obtain the plain text content in the matching element collection or replace the content of all matching elements. We can pass in the new link text as a parameter of the text() method, for example:


$( "a" ).text( "New link content" );

In this way, the content of the a tag is modified to "new link content". If we want to modify the contents of multiple a tags on the page, we only need to add the same class attribute name to these a tags as follows, and then use jQuery's selector to select these elements to modify their contents at once:


<a href="http://www.example.com" class="my-link">Original link content</a>. <a href="http://www.example2.com" class="my-link">Another link</a>. ...$( ".my-link" ).text( "New link content" );

At this time, all the content of a tag containing the class attribute named "my-link" will be changed to "new link content".


However, it should be noted that using the text() method can only modify the text content in the a tag, but cannot modify other attributes. If we want to modify the href attribute, we must use the attr() method. The attr() method can get or change the attribute value of the matching element, for example:


<a href="http://www.example.com" class="my-link">Original link content</a>. <a href="http://www.example2.com" class="my-link">Another link</a>. ...$( ".my-link" ).attr( "href", "http://www.new-example.com" );

In this way, the href attributes of all a tags containing the class attribute named "my-link" will be changed to "http://www.new-example.com".


The jQuery library can be used to easily modify the content and attributes of elements on the page. And, since jQuery is a popular JavaScript library, it has a wide range of applications and plenty of resources and tutorials to refer to. I hope this article can help you quickly master the method of using jQuery to modify the content and attributes of a tag.


Copyright Description:No reproduction without permission。

Knowledge sharing community for developers。

Let more developers benefit from it。

Help developers share knowledge through the Internet。

Follow us