How to change h3 content with jquery-Front-end Q&A-php.cn

Table of Contents

jquery changes h3 content

这是段落。

这是另一个段落。

Home

Web Front-end

Front-end Q&A

How to change h3 content with jquery

Jun 02, 2022 am 10:56 AM

jquery

Method: 1. Use the text method to change the content of h3. This method can set or return the h3 element content. The syntax is "h3 element object.text (changed content)"; 2. Use the html method to change h3. Content, this method can also set or return h3 element content, the syntax is "h3 element object.html (changed content)".

How to change h3 content with jquery

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

jquery changes h3 content

1. The html() method sets or returns the content of the selected element (innerHTML).

When this method is used to return content, the content of the first matching element is returned.

When this method is used to set content, the content of all matching elements is rewritten.

Tip: If you only need to set or return the text content of the selected element, use the text() method.

Syntax

Return content:

$(selector).html()

Copy after login

Set content:

$(selector).html(content)

Copy after login

Use function to set content:

$(selector).html(function(index,currentcontent))

Copy after login

2, To set or return the text content of the selected element, use the text() method

text() method to set or return the text content of the selected element.

When this method is used to return content, the text content of all matching elements is returned (HTML tags will be removed).

When this method is used to set content, the content of all matching elements is rewritten.

Tip: To set or return the innerHTML (text HTML tag) of the selected element, use the html() method.

Syntax

Return text content

$(selector).text()

Copy after login

Set text content:

$(selector).text(content)

Copy after login

Use function to set text content:

$(selector).text(function(index,currentcontent))

Copy after login

The example is as follows:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("这是h3的新内容");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>这也是h3的新内容</b>");
  });
});
</script>
</head>
<body>
<h3 id="这是段落">这是段落。</h3>
<h3 id="这是另一个段落">这是另一个段落。</h3>
<button id="btn1">text方法设置</button>
<button id="btn2">HTML方法设置</button>
</body>
</html>

Copy after login

Output result:

How to change h3 content with jquery

Video tutorial recommendation: jQuery video tutorial

The above is the detailed content of How to change h3 content with jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn