Can jquery change text content?-Front-end Q&A-php.cn

Can jquery change text content?

青灯夜游

Release： 2022-09-08 19:28:49

Original

3003 people have browsed it

jquery can change text content. Change method: 1. Use text() to change the text content of ordinary elements, the syntax is "element object.text("new text content")", and set the text content to a new value; 2. Use val() to change the form element The text content of the input, the syntax is "$("input").val("new text content")".

Can jquery change text content?

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

jquery can change text content.

Text content is divided into two situations:

Text content of ordinary elements
Text of form element input Content

Therefore, the modification method must also be separated.

Method 1. Use text() to change the text content of ordinary elements

text() can set the text content of the element, just set the text content to the new value can be changed.

<!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() {
					$("p").text("修改后的新文本内容");
				});
			});
		</script>
	</head>
	<body>

		<button>改变所有p元素的文本内容</button>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>

	</body>
</html>

Copy after login

Can jquery change text content?

2. Use val() to change the text content of the form element input

val() method returns or sets the selected The value of the element. The value of an element is set via the value attribute. This method is mostly used for input elements.

Just use val() to set the text content to a new value to change.

<!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() {
					$("input").val("王小明");
				});
			});
		</script>
	</head>
	<body>

		<button>改变input元素的文本内容</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
		<p>密　码: <input type="password" name="password" value="123456" /></p>
	</body>
</html>

Copy after login

Can jquery change text content?

Extended knowledge: Comparison between html() and text()

In addition to text(), there is also a html() You can also modify the content of ordinary elements

But the content set or returned by the html() method is content containing text and HTML tags.

<!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

Can jquery change text content?

As can be seen from this example, html() obtains all the content inside the element, while text() obtains only the text content.

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 Can jquery change text content?. For more information, please follow other related articles on the PHP Chinese website!