Maison > Article > interface Web > Comment renvoyer du HTML ou créer du HTML en utilisant JavaScript ?

Comment renvoyer du HTML ou créer du HTML en utilisant JavaScript ?

王林avant: 2023-09-10 21:25:061208parcourir

如何使用 JavaScript 返回 HTML 或构建 HTML？

Lors de la création d'applications Web, vous devez souvent générer dynamiquement du HTML côté client. Cela peut être fait en utilisant JavaScript, et il existe différentes manières de le faire. Dans cet article, nous allons vous montrer comment renvoyer HTML ou créer du HTML à l'aide de JavaScript.

Renvoi de HTML à partir d'une fonction

Une façon de générer dynamiquement HTML consiste à renvoyer une chaîne HTML à partir d'une fonction. Par exemple, disons que nous avons une fonction qui génère des éléments de liste -

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

Ensuite, nous pouvons utiliser cette fonction pour générer du HTML -

function generateListItem(text) {
   return &#39;<li>&#39; + text + &#39;</li>&#39;;
}

var list = '';
list += generateListItem('Item 1');
list += generateListItem('Item 2');
list += generateListItem('Item 3');
list += '';

console.log(list)

La variable de liste contient maintenant le HTML suivant -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Construire du HTML à l'aide des méthodes DOM

Dynamiquement générer HTML Une autre façon consiste à utiliser la méthode DOM pour construire la structure HTML. Cela peut être fait en créant des éléments puis en les ajoutant au DOM. Par exemple, disons que nous voulons créer une liste contenant les mêmes éléments qu'avant -

var list = document.createElement(&#39;ul&#39;);

var item1 = document.createElement(&#39;li&#39;);
item1.innerText = &#39;Item 1&#39;;
list.appendChild(item1);

var item2 = document.createElement(&#39;li&#39;);
item2.innerText = &#39;Item 2&#39;;
list.appendChild(item2);

var item3 = document.createElement(&#39;li&#39;);
item3.innerText = &#39;Item 3&#39;;
list.appendChild(item3);

La variable list contient maintenant le code HTML suivant -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Exemple

Dans l'exemple ci-dessous, nous utilisons différentes méthodes DOM pour créer un HTML liste.

<!DOCTYPE html>
<html>
<body>
   <h2> Building HML using DOM methods</h2>
   <div id="parent">
      <p> We create a list by generating HTML elements</p>
      <h4 id="child">Tutorials List</h4>
   </div>
   <div id="result"></div>

   <script>
      var list = document.createElement(&#39;ul&#39;);
      var item1 = document.createElement(&#39;li&#39;);
      item1.innerText = &#39;JavaScript&#39;;
      list.appendChild(item1);

      var item2 = document.createElement(&#39;li&#39;);
      item2.innerText = &#39;Python&#39;;
      list.appendChild(item2);

      var item3 = document.createElement(&#39;li&#39;);
      item3.innerText = &#39;Rupy&#39;;
      list.appendChild(item3);
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

Dans le programme ci-dessus, nous utilisons la méthode createElement pour créer des listes non ordonnées et des éléments de liste. La méthode appendChild est utilisée pour ajouter des éléments de liste à la liste.

Créer du HTML à l'aide de innerHTML

Une autre façon de créer du HTML consiste à utiliser l'attribut innerHTML. Cela peut être fait en créant un élément, puis en définissant sa propriété innerHTML sur une chaîne HTML. Par exemple, disons que nous voulons créer une liste contenant les mêmes éléments qu'avant -

var list = document.createElement(&#39;ul&#39;);
list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;

La variable list contient maintenant le code HTML suivant -

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Exemple

Dans l'exemple ci-dessous, nous construisons une liste HTML en attribuant le liste vers innerHTML .

<!DOCTYPE html>
<html>
<body>
   <div id="result"> List </div>
   <script>
      var list = document.createElement(&#39;ul&#39;);
      list.innerHTML = &#39;<li>Item 1</li><li>Item 2</li><li>Item 3</li>&#39;;
      document.getElementById("result").appendChild(list)
   </script>
</body>
</html>

Dans le programme ci-dessus, nous créons une liste en utilisant la méthode createElement. Utilisez innerHTML pour ajouter des éléments de liste à une liste. Pour afficher la liste, nous ajoutons l'élément avec id = "result" en utilisant la méthode appendChild.

Conclusion

Dans ce tutoriel, nous avons montré comment renvoyer du HTML ou créer du HTML à l'aide de JavaScript. Il existe différentes manières de procéder, et la méthode que vous choisissez dépend de vos besoins.

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 html 字符串 dom innerHTML

Déclaration：

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

Article précédent：Comment afficher la barre de progression dans ReactNative ?Article suivant：Comment afficher la barre de progression dans ReactNative ?

Articles Liés

Voir plus