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

2130 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é : , ]