Maison > Article > interface Web > jquery change le contenu d'une balise

jquery change le contenu d'une balise

王林original: 2023-05-14 09:53:07696parcourir

Dans le développement front-end, nous rencontrons souvent le besoin de modifier le contenu des éléments de la page d'origine via JavaScript. Parmi eux, modifier le contenu de la balise a est également une exigence très courante. Dans cet article, nous présenterons comment modifier le contenu d'une balise via jQuery.

Sélectionnez la balise a qui doit être modifiée via le sélecteur de classe

Dans la page, si nous voulons modifier le contenu de la balise a via jQuery, nous devons d'abord trouver la balise a qui doit être modifiée . Il peut y avoir plusieurs façons de trouver cette balise, par exemple en la sélectionnant par nom de balise, identifiant ou d'autres attributs. Mais ici, nous utiliserons le sélecteur de classe pour sélectionner la balise dont le contenu doit être modifié. L'exemple de code est le suivant :

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.modify').text('修改后的内容');
        });
    </script>
</head>
<body>
    <a href="#" class="modify">需要修改的内容</a>
</body>
</html>

Dans le code ci-dessus, nous avons ajouté un nom de classe "modify" à la balise a Grâce à ce sélecteur de classe, nous avons trouvé la balise a dont nous voulons modifier le contenu et l'avons modifiée via le texte. () le texte dedans. Il convient de noter que lors de l'exécution du code jQuery, nous devons nous assurer que la page a été chargée. Ici, nous utilisons $(function(){}) pour nous en assurer.

Sélectionnez la balise a qui doit être modifiée via le sélecteur d'identifiant

En plus de sélectionner la balise a qui doit être modifiée via le sélecteur de classe, une autre méthode courante consiste à sélectionner via le sélecteur d'identifiant. L'exemple de code est le suivant :

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('#modify').text('修改后的内容');
        });
    </script>
</head>
<body>
    <a href="#" id="modify">需要修改的内容</a>
</body>
</html>

Dans le code ci-dessus, nous avons ajouté un identifiant "modifier" à la balise a Grâce à ce sélecteur d'identifiant, nous avons trouvé la balise a dont le contenu doit être modifié et modifié le texte qu'elle contient. via la méthode text().

Ajouter des éléments HTML comme contenu de la balise a

En plus de modifier le texte de la balise a, nous pouvons également modifier le contenu de la balise a en ajoutant des éléments HTML. Dans l'exemple suivant, nous allons créer un nouvel élément span puis l'ajouter à la balise a. L'exemple de code est le suivant :

<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $('.modify').html('<span style="color: red;">修改后的内容</span>');
        });
    </script>
</head>
<body>
    <a href="#" class="modify">需要修改的内容</a>
</body>
</html>

Dans le code ci-dessus, nous utilisons la méthode html() pour modifier le contenu de la balise a. Parmi eux, un nouvel élément span est créé via la balise HTML, et son style est défini sur rouge, puis utilisé comme contenu dans la balise a.

Résumé

Grâce aux trois méthodes ci-dessus, nous pouvons utiliser jQuery pour modifier le contenu de la balise a très facilement. Il convient de noter que dans le développement réel, nous devons choisir la méthode la plus appropriée en fonction de besoins et de scénarios spécifiques. Dans le même temps, avant de modifier le contenu de la balise a, il faut également s'assurer que la page a été chargée pour éviter le problème des éléments introuvables.

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!

JavaScript jquery html function 选择器

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：conversion de codage de caractères nodejsArticle suivant：conversion de codage de caractères nodejs

Articles Liés

Voir plus