L'innerhtml peut être utilisé pour écrire dynamiquement le document HTML. Il est principalement déployé pour générer des documents HTML dynamiques, y compris les formulaires de commentaires, les formulaires d'enregistrement, les liens et bien d'autres. De plus, vous pouvez également remplacer l'Innerhtml à l'intérieur d'une div à l'aide de jQuery. Pour ce faire, le «.html ()»La fonction est utilisée. Lorsque vous cliquez sur le bouton une fois le site Web chargé, le contenu à l'intérieur du div sera modifié avec le contenu de la fonction HTML ().

Cet article montrera le remplacement de l'innerhtml d'une div utilisant jQuery.

Comment remplacer innerhtml d'une div utilisant jQuery?

Pour remplacer l'innerhtml d'un conteneur div utilisant jQuery, suivez la procédure ci-dessous.

Étape 1: Créez un conteneur principal «div»

Initialement, créez le principal conteneur «div» en utilisant le ««Element et ajoutez un ID dans la balise d'ouverture« Div »avec un nom particulier.

Étape 2: Ajouter des titres

Ensuite, utilisez n'importe quelle étiquette d'en-tête de "H1" pour "H6"Pour ajouter une rubrique à une page HTML. Par exemple, nous avons utilisé "H1"Pour la rubrique principale et"h2”Pour la deuxième tête. Vous pouvez également définir le style en ligne à l'intérieur de la balise d'en-tête.

Étape 3: Faites un autre conteneur div

Après cela, faites un autre conteneur Div en suivant la même méthode à l'étape précédente.

Étape 4: Créez un bouton

Ensuite, ajoutez un bouton à l'aide du "" élément. Ajoutez également un "classe”Attribut à l'intérieur de la balise d'ouverture div et attribuez deux ou plusieurs noms de classe à cet attribut. Le "taper»L'attribut est utilisé pour spécifier le type de l'élément. Ensuite, intégrez du texte entre le «bouton”Élément à afficher sur le bouton:

Linuxhint Ltd UK

Premier contenu sans aucun changement

La sortie du bloc de code ci-dessus est indiquée ci-dessous:

Étape 3: Appliquer CSS sur le conteneur «div»

Accéder au second "div"Container avec l'aide du nom de classe".au deuxième essai»:

.deuxième div
Texte-aligne: Centre;

Après avoir accédé au conteneur Div, appliquez le «alignement de texte”Propriété de CSS utilisée pour définir l'alignement du texte.

Sortir

Étape 4: Insérer la bibliothèque jQuery

Nous ajouterons la bibliothèque jQuery en insérant le lien suivant à l'intérieur de la balise entre l'élément de tête du fichier HTML:

Étape 5: Remplacer innerhtml de div

Dans le "”Tag, ajoutez le code suivant:

Dans l'extrait de code ci-dessus:

• • Définir la "prêt()”Fonction qui ne s'exécutera qu'une fois que le modèle d'objet de document de page (DOM) est prêt pour que le code JavaScript s'exécute.
  • Faites une fonction pour l'élément bouton pour effectuer l'action lorsque l'utilisateur frappe dessus.
  • Maintenant le "&(sélecteur).html ()»La fonction est utilisée pour remplacer l'innerhtml de div. Pour ce faire, ajoutez les données à l'intérieur du «()" remplacer.

On peut observer que l'innerhtml de la div a été modifié lorsque le bouton est cliqué:

Vous avez appris à remplacer l'Innerhtml d'une div utilisant jQuery.

Conclusion

Pour remplacer l'Innerhtml d'une div utilisant jQuery, insérez d'abord un lien de la bibliothèque jQuery dans la balise de script à l'aide du "SRC" attribut. Puis le "html ()"La fonction est utilisée comme"&(sélecteur).html". Pour ce faire, le «$ ("# Premier div").html"Est utilisé dans ce scénario. Cet article a expliqué la méthode de remplacement de l'Innerhtml d'un conteneur div utilisant jQuery.