So ändern Sie den Inhalt eines Knotens in jquery-Front-End-Fragen und Antworten-php.cn

So ändern Sie den Inhalt eines Knotens in jquery

青灯夜游

Freigeben： 2022-03-22 19:42:59

Original

2073 Leute haben es durchsucht

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“)“.

So ändern Sie den Inhalt eines Knotens in jquery

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!