Maison > interface Web > js tutoriel > Comment ajouter du contenu à une section en utilisant jQuery/JavaScript ?

Comment ajouter du contenu à une section en utilisant jQuery/JavaScript ?

王林
Libérer: 2023-09-17 11:49:02
avant
1045 Les gens l'ont consulté

如何使用 jQuery/JavaScript 在部分中添加内容?

Nous pouvons ajouter du contenu à la section du site Web en utilisant les méthodes "append" ou "prepend" de jQuery. Cela peut être fait en sélectionnant l'élément à l'aide de la méthode "selector" de jQuery, puis en ajoutant le contenu requis à l'aide de la méthode appropriée. De plus, nous pouvons ajouter du contenu à la section en utilisant l'attribut 'innerHTML' de JavaScript.

Il existe de nombreuses façons d'ajouter du contenu à la balise head par programmation. Aujourd'hui, nous en discuterons 3 -

  • Utilisez la méthode .append() de jQuery -

  • Utilisez la méthode document.createElement() de JavaScript -

  • Utilisez la méthode insertAdjacentHTML() de JavaScript -

Utilisez ces 3 méthodes pour réaliser la même tâche, qui consiste à ajouter du contenu à la balise

Alors, discutons de ces méthodes une par une.

Méthode 1 : utilisez la méthode .append() de jQuery

Il s'agit d'un simple one-liner pour ajouter du contenu à n'importe quelle balise en HTML (dans notre cas, ce sera la balise head) -

$("head").append("alert('hello');");
Copier après la connexion

Méthode 2 : utilisez la méthode document.createElement() de JavaScript

En utilisant la fonction JavaScript createElement() puis la fonction appendChild(), nous pouvons obtenir la même fonctionnalité que celle-ci -

var script = document.createElement("script");
script.innerHTML = "alert('hello');";
document.getElementsByTagName("head")[0].appendChild(script);
Copier après la connexion

Méthode 3 : utilisez la méthode insertAdjacentHTML() de JavaScript

La dernière méthode dont nous parlerons est la méthode insertAdjacentHTML() de JavaScript -

document.head.insertAdjacentHTML("beforeend", "alert('hello');");
Copier après la connexion

Maintenant que nous avons discuté de toutes ces méthodes séparément, utilisons-les dans un exemple concret.

Exemple

Le code complet est le suivant -

<html>
<head>
   <title>Content in head section</title>
</head>
   <body>   
      <h1 style = "color: black;">Welcome to my website</h1>  
   <script src="https://code.jquery.com/jquery-3.6.0.min.js">
   </script>    
      <script>
         // Using jQuery's .append() method
         $("head").append("<link rel='stylesheet' href='styles.css'>");
         // Using JavaScript's document.createElement() method
         var meta = document.createElement("meta");
         meta.name = "description";
         meta.content = "This is my website";
         document.getElementsByTagName("head")[0].appendChild(meta);
      </script>
   </body>
</html>
Copier après la connexion

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!

Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal