Comment modifier le contenu d'un nœud en jquery-Questions et réponses frontales-php.cn

Comment modifier le contenu d'un nœud en jquery

青灯夜游

Libérer： 2022-03-22 19:42:59

original

2072 Les gens l'ont consulté

Comment modifier le contenu du nœud avec jquery : 1. Utilisez text() pour modifier le contenu du texte du nœud, la syntaxe est "node object.text("new text content""); 2. Utilisez html() pour directement réécrivez le contenu du nœud, syntaxe "node object.html("new node content")".

Comment modifier le contenu d'un nœud en jquery

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2, ordinateur Dell G3.

jquery modifie le contenu du nœud

Méthode 1 : utilisez la méthode text()

text() pour définir ou renvoyer le contenu du texte de l'élément sélectionné.

Lorsque cette méthode est utilisée pour renvoyer du contenu, le contenu textuel de tous les éléments correspondants est renvoyé (les balises HTML seront supprimées).
Lorsque cette méthode est utilisée pour définir le contenu, le contenu de tous les éléments correspondants est remplacé.

Exemple :

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

Copier après la connexion

Comment modifier le contenu dun nœud en jquery

Méthode 2 : Utilisez la méthode html()

html() pour définir ou renvoyer le contenu de l'élément sélectionné (innerHTML).

Lorsque cette méthode est utilisée pour renvoyer du contenu, le contenu du premier élément correspondant est renvoyé.
Lorsque cette méthode est utilisée pour définir le contenu, le contenu de tous les éléments correspondants est remplacé.

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

Copier après la connexion

Comment modifier le contenu dun nœud en jquery

Connaissances étendues : Comparaison de html() et 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>

Copier après la connexion

Comment modifier le contenu dun nœud en jquery

Comme le montre cet exemple, html() obtient tout le contenu à l'intérieur de l'élément, tandis que text( ) Ce qui est obtenu est uniquement le contenu du texte.

La différence entre les deux méthodes html() et text() peut être clairement comparée à partir du tableau ci-dessous.

[Apprentissage recommandé : , ]

Code HTML	html()	text()
PHP中文网	PHP中文网	PHP中文网
PHP中文网 gt;	(chaîne vide)
Tutoriel vidéo jQuery	Développement web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment modifier le contenu d'un nœud en jquery