Maison > Article > interface Web > Comment combiner plusieurs éléments à l'aide de JavaScript et ajouter le résultat à un div ?

Comment combiner plusieurs éléments à l'aide de JavaScript et ajouter le résultat à un div ?

PHPzavant: 2023-09-08 14:37:091317parcourir

如何使用 JavaScript 组合多个元素并将结果附加到 div 中？

Parfois, nous devons utiliser JavaScript pour manipuler des éléments HTML. Par conséquent, nous pouvons utiliser JavaScript pour ajouter ou supprimer des éléments HTML. Ce tutoriel nous apprendra à combiner plusieurs éléments HTML dans une prise en utilisant JavaScript.

Parfois, nous devons afficher certains éléments HTML à l'utilisateur lorsqu'il clique sur un bouton ou sur un déclencheur d'événement spécifique. Nous pouvons donc utiliser la méthode ci-dessous pour combiner plusieurs éléments et ajouter le résultat à un élément div à l'aide de JavaScript.

Utiliser l'attribut innerHTML

innerHTML, comme son nom l'indique, nous permet de définir le HTML de n'importe quel élément spécifique à l'aide de JavaScript. L'utilisation de l'opérateur d'affectation avec l'attribut innerHTML remplacera le HTML d'un élément spécifique.

Lorsque nous utilisons l'opérateur += avec l'attribut innerHTML, nous pouvons ajouter plusieurs éléments à un élément HTML spécifique.

Grammaire

Vous pouvez combiner plusieurs éléments et les ajouter à un élément div à l'aide de l'attribut innerHTML selon la syntaxe suivante.

test_div.innerHTML += html;

Dans la syntaxe ci-dessus, test_div est un élément HTML accessible via JavaScript.

Exemple

Dans l'exemple ci-dessous, nous ferons cinq itérations de la boucle for. Nous utilisons l'attribut innerHTML pour ajouter du code HTML à l'élément div à chaque itération de boucle.

<html>
<head>
   <style>
      button {
         font-size: 1.3rem;
         background-color: aqua;
         border-radius: 10px;
         color: blue;
         margin: 10px;
      }
   </style>
</head>
<body>
   <h3>Using the <i> innerHTML property </i> to append multiple HTML elements to the particular HTML element</h3>
   <div id = "test_div"> This is the HTML div element.</div>
   <button onclick = "appendEle()"> Append elements</button>
   <script>
      function appendEle() {
         let test_div = document.getElementById("test_div");
         for (let i = 0; i < 5; i++) {
            test_div.innerHTML += "<p> digit is " + i + " </p>";
         }
      }
   </script>
</body>
</html>

Utilisez la méthode append() de JQuery

Nous pouvons ajouter du HTML à un élément spécifique en utilisant la méthode append() de JQuery. Nous pouvons utiliser la méthode append() plusieurs fois pour ajouter plusieurs éléments à un élément HTML spécifique.

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour ajouter plusieurs éléments HTML à un élément HTML spécifique à l'aide de la méthode append() de jQuery.

$('#content').append(html)

Dans la syntaxe ci-dessus, html est une ligne de code HTML, contenant plusieurs éléments ou des éléments uniques, à ajouter à la fin de l'élément HTML.

Exemple

Dans l'exemple ci-dessous, lorsque l'utilisateur clique sur le bouton, il appelle la fonction appendHTML(). Dans la fonction appendHTML(), nous ajoutons plusieurs éléments HTML à un élément spécifique à l'aide d'une boucle. Les utilisateurs peuvent voir que nous utilisons la méthode JQuery append() pour ajouter de nouveaux éléments HTML à chaque itération de boucle.

<html>
<head>
   <style>
      div {
         font-size: 1.5rem;
         background-color: yellow;
         color: black;
         width: 250px;
      }
   </style>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
   <h3>Using the <i>JQuery append()</i> method to append multiple HTML elements to the particular HTML element </h3>
   <div id = "content"> testing content. </div><br>
   <button onclick = "appendHTML()"> Append elements </button>
   <script>
      function appendHTML() {
         for (let i = 0; i < 10; i++) {
            $('#content').append('<div> This div is appended! </div>')
          }
      }
   </script>
</body>
</html>

Dans la sortie ci-dessus, l'utilisateur peut observer que lorsqu'il clique sur le bouton, il ajoute l'élément HTML à l'élément div avec l'identifiant "content".

Utilisez la méthode after() de JavaScript

JavaScript inclut la méthode after() pour ajouter des éléments HTML après un élément spécifique. Nous pouvons transmettre des lignes HTML séparées par des virgules ou créer des éléments after en JavaScript comme arguments à la méthode after().

Grammaire

Les utilisateurs peuvent suivre la syntaxe ci-dessous pour ajouter plusieurs éléments à un élément HTML à l'aide de la méthode after() de JavaScript au lieu de les combiner en un seul élément.

div_Element.after(elements);

Paramètres

elements - Il s'agit de plusieurs éléments HTML séparés par des virgules ajoutés après un élément HTML spécifique.

Exemple

Dans l'exemple ci-dessous, la fonction concatElements() est exécutée lorsque l'utilisateur clique sur le bouton. Dans la fonction concatElements(), nous créons un élément HTML à l'aide de la méthode createElement() et y ajoutons du HTML à l'aide de l'attribut innerHTML.

Après cela, nous passons element1 et element2 comme paramètres de la méthode after() pour les ajouter après l'élément div.

<html>
<head>
   <style>
      div {
         font-size: 1.5rem;
         background-color: yellow;
         color: black;
         width: 250px;
      }
      p {
         font-size: 1rem;
         background-color: blue;
         color: white;
         width: 250px;
         padding: 5px;;
      }
   </style>
</head>
<body>
   <h3>Using the <i>after()</i> method to append multiple HTML elements to the particular HTML element</h3>
   <div id = "content"> testing content. </div>
   <button onclick = "concatElements()"> Combine elements </button>
   <script>
      function concatElements() {
         let element1 = document.createElement('p');
         element1.innerHTML = "This is a first element!";
         let element2 = document.createElement('p');
         element2.innerHTML = "This is a second element!";
         let div_Element = document.getElementById('content');
         div_Element.after(element1, element2);
      }
   </script>
</body>
</html>

L'utilisateur a appris trois façons de combiner plusieurs éléments HTML en JavaScript et d'ajouter l'élément résultant à n'importe quel élément HTML. Dans la première méthode, l'utilisateur peut stocker plusieurs éléments dans une seule variable à l'aide de l'opérateur +=, puis nous pouvons attribuer la valeur de l'élément résultant à l'attribut innerHTML.

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 运算符赋值运算符 for 循环 append 事件 innerHTML

Déclaration：

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

Article précédent：Comment cibler un frame spécifique via un lien hypertexte en JavaScript ?Article suivant：Comment cibler un frame spécifique via un lien hypertexte en JavaScript ?

Articles Liés

Voir plus