How to use jQuery to modify and read an element's HTML

Inner HTML is an attribute used to access and modify the HTML content of an element. Over the past few years, jQuery has become one of the most popular tools for implementing internal templates in JS. In this article, we'll cover how to use jQuery to modify and read an element's HTML.

Syntax of jQuery internal template (Inner HTML)

Conceptually, internal template (Inner HTML) involves the operation of DOM (Document Object Model). It operates on elements by modifying the DOM. The following is the basic jQuery syntax for modifying HTML:

$(selector).html(content)

In the above syntax, selector points to the element that needs to be modified. The content of HTML is represented by the content variable. Content can be simple text or HTML code. If the content passed in is a function, the return value of the function will be the HTML content.

Let’s look at the use of jQuery’s inner template (Inner HTML) through some examples.

Example 1:

In the following example, we select the element marked "content" and set its new HTML content to "

Welcome to My Website!< /h1>"：

$("#content").html("

Welcome to My Website!

");

Example 2:

In the following example, we use a JavaScript function to dynamically calculate the HTML content marked as content:

$("#content").html(function(){
return "Today's date is: " Date();
});

Read the content of the element (Inner HTML)

In addition to setting the content of the element, you can also use jQuery to read the content of the element (Inner HTML). The following is the basic jQuery syntax for reading the HTML content of an element:

$(selector).html()

In this syntax, the selector points to the element that needs to be read. The return value will be the HTML content of the element. Next, let's look at an example.

Example 3:

In the following example, we traverse all list items marked as "list" and output the HTML of each item to the console:

$ ("#list li").each(function(){
console.log($(this).html());
});

Summary

Through this article, we have learned how to use jQuery's Inner HTML tag to read and modify the HTML content of an element. We also saw how to use functions to dynamically calculate element content. We hope this article helped you better understand jQuery’s internal templates and learn how to use it to process HTML.

The above is the detailed content of How to use jQuery to modify and read an element's HTML. For more information, please follow other related articles on the PHP Chinese website!