Heim >Web-Frontend >Front-End-Fragen und Antworten >So ändern Sie den Inhalt eines Knotens in jquery

So ändern Sie den Inhalt eines Knotens in jquery

青灯夜游Original: 2022-03-22 19:42:592124Durchsuche

So ändern Sie den Knoteninhalt mit jquery: 1. Verwenden Sie text(), um den Textinhalt des Knotens zu ändern. Die Syntax lautet „node object.text(„neuer Textinhalt“)“ 2. Verwenden Sie html(), um ihn direkt zu ändern Schreiben Sie den Knoteninhalt neu, Syntax „node object.html(“new node content“)“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery ändert den Inhalt des Knotens

Methode 1: Verwenden Sie die Methode text()

text(), um den Textinhalt des ausgewählten Elements festzulegen oder zurückzugeben.

Wenn diese Methode zum Zurückgeben von Inhalten verwendet wird, wird der Textinhalt aller übereinstimmenden Elemente zurückgegeben (HTML-Tags werden entfernt).
Wenn diese Methode zum Festlegen von Inhalten verwendet wird, wird der Inhalt aller übereinstimmenden Elemente überschrieben.

Beispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").text("Hello world!");
				});
			});
		</script>
	</head>
	<body>

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

	</body>
</html>

So ändern Sie den Inhalt eines Knotens in jquery

Methode 2: Verwenden Sie die Methode html()

html(), um den Inhalt des ausgewählten Elements (innerHTML) festzulegen oder zurückzugeben.

Wenn diese Methode zum Zurückgeben von Inhalten verwendet wird, wird der Inhalt des ersten übereinstimmenden Elements zurückgegeben.
Wenn diese Methode zum Festlegen von Inhalten verwendet wird, wird der Inhalt aller übereinstimmenden Elemente überschrieben.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").html("Hello <b>world!</b>");
				});
			});
		</script>
	</head>
	<body>

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

	</body>
</html>

So ändern Sie den Inhalt eines Knotens in jquery

Erweitertes Wissen: Vergleich von html() und text()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.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>

So ändern Sie den Inhalt eines Knotens in jquery

Wie aus diesem Beispiel ersichtlich ist, ruft html() den gesamten Inhalt innerhalb des Elements ab, während text( ) Was erhalten wird, ist nur der Textinhalt.

Der Unterschied zwischen den beiden Methoden html() und text() kann anhand der folgenden Tabelle deutlich verglichen werden.

HTML-Code	html()	text()
PHP中文网	PHP中文网	PHP中文网
PHP中文网	PHP中文网	PHP中文网
& lt;em> ;		(leere Zeichenfolge)

[Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Entwicklung ]

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Inhalt eines Knotens in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche Methoden gibt es zum Durchlaufen von Knoten in jquery?Nächster Artikel：Welche Methoden gibt es zum Durchlaufen von Knoten in jquery?

In Verbindung stehende Artikel

Mehr sehen