La lecture et la modification de la structure HTML d'un élément ou du contenu textuel d'un élément sont des opérations DOM courantes. jQuery propose deux méthodes pratiques pour un tel traitement. html() et .text()
. Méthode html()
Obtenez le contenu HTML du premier élément correspondant de la collection ou définissez le contenu html de chaque élément correspondant. Il existe trois utilisations spécifiques :
.html ( ) Sans transmettre de valeur, vous obtenez le contenu HTML du premier élément correspondant de la collection
.html( htmlString ) Définissez le contenu HTML de chaque élément correspondant
.html( function( index , oldhtml) ) est utilisé pour renvoyer une fonction permettant de définir le contenu HTML
Remarque : La méthode .html() utilise l'attribut innerHTML du DOM pour le traitement, donc la chose la plus importante à laquelle prêter attention est la définition et obtention. Question, cette opération concerne l'ensemble du contenu HTML (pas seulement le contenu texte)
Regardons quelques exemples de la méthode html() suivante
Comment pour changer html Le contenu de l'élément est codé comme suit :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
$('#dv').html("www.php.cn");
</script>
</body>
</html>Modifié le contenu de la balise div
2 Ajouter le contenu
Par exemple, dans l'exemple ci-dessus, nous devons ajouter une URL après le ｽｽｐ中文网, alors comment devons-nous implémenter
Veuillez consulter le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
$('#dv').append("www.php.cn");
</script>
</body>
</html>Comme dans l'exemple ci-dessus, cela ajoutera un www à notre balise div L'URL de .php.cn
méthodes après et avant
after : Insérer du contenu HTML après tous les éléments correspondants
before : Insérer du contenu HTML avant tous les éléments correspondants
Par exemple, dans notre exemple ci-dessus, comment ajouter du contenu avant ou après la balise div
L'exemple suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
$('#dv').before("欢迎来到：");
$("#dv").after("学习编程");
</script>
</body>
</html> méthode text()
Obtient le contenu textuel combiné de chaque élément de l'ensemble d'éléments correspondant, y compris leurs descendants, ou définit le contenu textuel de chaque élément de l'ensemble d'éléments correspondant sur le contenu textuel spécifié. , il existe trois utilisations spécifiques :
.text() Obtient le texte fusionné de chaque élément de l'ensemble d'éléments correspondant, y compris leurs descendants
.text( textString ) est utilisé pour définir le contenu de l'élément correspondant Le texte de
.text( function(index, text) ) est utilisé pour renvoyer une fonction
qui définit le contenu du texte. Veuillez consulter l'exemple suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="dv">php 中文网</div>
<script type="text/javascript">
alert($('#dv').text());
</script>
</body>
</html>
section suivante