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 ?

王林avant: 2023-09-17 11:49:02983parcourir

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

Nous pouvons ajouter du contenu à la section 93f0f5c25f18dab9d176bd4f6de5d30e du site Web en utilisant les méthodes "append" ou "prepend" de jQuery. Cela peut être fait en sélectionnant l'élément 93f0f5c25f18dab9d176bd4f6de5d30e à 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 93f0f5c25f18dab9d176bd4f6de5d30e 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 d24920cbaa5caf2d2dac816929b26725

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');");

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);

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');");

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>

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 append innerHTML 选择器

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment vérifier si un tableau est un sous-ensemble d'un autre tableau en utilisant JavaScript ?Article suivant：Comment vérifier si un tableau est un sous-ensemble d'un autre tableau en utilisant JavaScript ?

Articles Liés

Voir plus