Comment renvoyer du HTML ou créer du HTML en utilisant JavaScript ?-js tutoriel-php.cn

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

王林

Libérer： 2023-09-10 21:25:06

avant

1205 Les gens l'ont consulté

如何使用 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;;
}

Copier après la connexion

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)

Copier après la connexion

La variable de liste contient maintenant le HTML suivant -

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

Copier après la connexion

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

Copier après la connexion

La variable list contient maintenant le code HTML suivant -

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

La variable list contient maintenant le code HTML suivant -

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

Copier après la connexion

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>

Copier après la connexion

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!