Heim > Web-Frontend > Front-End-Fragen und Antworten > So ändern Sie den Span-Wert in JQuery

So ändern Sie den Span-Wert in JQuery

青灯夜游
Freigeben: 2022-12-16 17:29:51
Original
4030 Leute haben es durchsucht

Änderungsschritte: 1. Verwenden Sie den JQuery-Selektor, um das angegebene Span-Element zu erhalten, die Syntax „$(„selector“)“ 2. Verwenden Sie die Funktion text() oder html(), um den Inhaltswert des angegebenen Elements zu ändern Objekt, die Syntax „element“ object.text(„newcontent“)“ oder „element object.html(“newcontent“)“.

So ändern Sie den Span-Wert in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

In jquery können Sie den jquery-Selektor und die Funktion text() (oder html()) verwenden, um den Inhaltswert von span zu ändern.

Implementierungsidee:

  • Erhalten Sie das angegebene Span-Elementobjekt.

  • Ändern Sie den Inhaltswert des angegebenen Elementobjekts.

Implementierungsschritte:

Schritt 1. Verwenden Sie den JQuery-Selektor, um das angegebene Span-Element abzurufen.

$("选择器")
Nach dem Login kopieren
  • gibt das JQuery-Objekt zurück, das das angegebene Span-Element enthält text() Oder html() Funktion zum Ändern des Inhaltswerts des angegebenen Elementobjekts

text() kann den Textinhalt des Elements festlegen und durch einfaches Festlegen des Textinhalts auf den neuen Wert geändert werden .

  • html() kann Inhalte festlegen oder zurückgeben, die Text- und HTML-Tags enthalten.

  • span元素对象.text("新内容")
    span元素对象.html("新内容")
    Nach dem Login kopieren
  • Beispiel:

    <!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() {
    					$("#sp1").text("text()修改的新内容值")
    					$("#sp2").html(&#39;html()修改的新内容值&#39;);
    					$("#sp3").html(&#39;<b>html()修改的新内容值</b>&#39;);
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<button>改变span元素的内容</button><br><br>
    		<span id="sp1">span元素旧内容。</span><br><br>
    		<span id="sp2">span元素旧内容。</span><br><br>
    		<span id="sp3">span元素旧内容。</span><br><br>
    	</body>
    </html>
    Nach dem Login kopieren

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

So ändern Sie den Span-Wert in JQuery

html() ruft den gesamten Inhalt innerhalb des Elements ab, während text() nur den Textinhalt ruft.

<!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>
Nach dem Login kopieren

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

So ändern Sie den Span-Wert in JQuery

HTML-Code

html()text()
PHP中文网
PHP中文网PHP中文网
PHP中文网
PHP中文网
& lt;em> ;
(leerer String)jQuery-Video-Tutorial, Web-Frontend-Entwicklung
PHP中文网
[Empfohlenes Lernen:
]

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage