Comment ajouter du contenu à une section en utilisant jQuery/JavaScript ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-17 11:49:02

avant

1044 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!