How to change the content of <h> tag in jquery-Front-end Q&A-php.cn

How to change the content of tag in jquery

青灯夜游

Release： 2022-11-02 19:23:32

Original

1909 people have browsed it

Two modification methods: 1. Use the jquery selector to obtain the h tag object, and use text() to modify the text content of the object. The syntax is "$("selector").text("new content") ;"; 2. Use the jquery selector to obtain the h tag object, and use html() to modify the content of the object (the content of the text and HTML tag), with the syntax "$("selector").html("new content"); ".

How to change the content of <h> tag in jquery

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

Two ways to change the content of the tag with jquery

Method 1: Use text() to change the text content

text() can set the text content of the element, which can be changed by simply setting the text content to a new value.

Modification steps:

Use jquery selector to obtain the h tag (h1~h6) object

$("选择器")

Copy after login

Use text() to modify the content of the obtained object

对象.text("新内容")

Copy after login

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("h1,h2,h3,h4").text("修改后的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<button>改变所有h元素的文本内容</button>
		<h1>这是一个大标题。</h1>
		<h2>这是另一个标题。</h2>
		<h3>这是另一个标题。</h3>
		<h4>这是另一个段落。</h4>

	</body>
</html>

Copy after login

How to change the content of <h> tag in jquery

Method 2: Use html() changes tag content

html() can set or return content that contains text and HTML tags.

Modification steps:

Use jquery selector to obtain the h tag (h1~h6) object

$("选择器")

Copy after login

Use html() to modify the content of the obtained object

对象.html("新内容")

Copy after login

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("h1").html("修改后的新文本内容");
					$("h2,h3,h4").html(&#39;<span style="color: red;">修改后的新文本内容</span>&#39;);
				});
			});
		</script>
	</head>
	<body>
		<button>改变所有h元素的文本内容</button>
		<h1>这是一个大标题。</h1>
		<h2>这是另一个标题。</h2>
		<h3>这是另一个标题。</h3>
		<h4>这是另一个段落。</h4>

	</body>
</html>

Copy after login

How to change the content of <h> tag in jquery

Expand knowledge: html () Comparison with text()

html() obtains all the content inside the element, while text() obtains only the text content.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(function () {
            var strHtml = $("p").html();
            var strText = $("p").text();
            $("#txt1").val(strHtml);
            $("#txt2").val(strText);
        })
    </script>
	</head>
	<body>
		<p><strong style="color:hotpink">PHP中文网</strong></p>
		html()是：<input id="txt1" type="text" /><br />
		text()是：<input id="txt2" type="text" />
	</body>
</html>

Copy after login

How to change the content of <h> tag in jquery

The difference between the two methods html() and text() can be clearly compared from the following table.

PHP Chinese website

[Recommended learning:

HTML code	html()	text()
	PHP Chinese website	PHP Chinese website
##PHP中文网	PHP中文网
	(empty string)

jQuery video tutorial

, web front-end development】

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