Comment ajouter html vers une page avec jQuery

jQuery peut être utilisé pour ajouter du code HTML à une page. Vous pouvez ajouter toutes sortes de HTML, des images, à peu près tout, et changer complètement la présentation de la page en utilisant jQuery. Cela est pas vraiment une bonne idée, car il peut faire vraiment, vraiment déroutant pour comprendre ce qui vient d'où et peut également être plus difficile à maintenir dans l'avenir quand vous avez besoin de changer la page.

Sommaire

En tout état de cause, ajoutant HTML pour des choses comme des messages d'erreur ou dans le but d'ajouter des données à une page est tout à fait commun. Pensez à un site Voyage qui recherche des informations de vol. Vous cliquez sur un bouton, et il construit dynamiquement les résultats, sur la même page. Ces sites utilisent javascript, jQuery plusieurs fois, pour accomplir cet exploit.

Mais avant que vous allez changer HTML que vous devriez apprendre comment ajouter HTML à une page.




Cette annonce montre une simple page HTML qui crée une liste d'éléments.

jQuery

Ajout HTML

  • Voilà 1
  • Voilà 2

Une page vue dans un navigateur Web ressemble à celui-ci:

image0.jpg

La page utilise une liste non ordonnée avec deux articles. Vous pouvez ajouter un autre élément à cette liste avec le jQuery append () fonction. Cela signifie sélectionnant le

    élément, qui vous savez déjà comment faire, et puis en appelant le append () fonction. Voici un exemple d'ajouter un troisième élément à la liste:

    $ ("# theList"). append ("
  • Voilà 3
  • ") -

    Comme vous pouvez le voir, vous sélectionnez le

      élément à l'aide d'un sélecteur d'ID, puis appeler le append () fonction avec le code HTML à ajouter. Ne pas obtenir beaucoup plus simple que cela.

      Cette liste indique le code final. Notez que jQuery a été ajouté dans le section et le append () se situe dans la fonction prêt () fonction.

      jQuery

      Ajout HTML

      • Voilà 1
      • Voilà 2

      Lorsqu'on regarde dans un navigateur, le résultat ressemble à ceci:

      image1.jpg

      » » » » Comment ajouter html vers une page avec jQuery