Comment créer un élément à partir d'une chaîne en JavaScript ?-js tutoriel-php.cn

Comment créer un élément à partir d'une chaîne en JavaScript ?

王林

Libérer： 2023-08-27 18:21:03

avant

1563 Les gens l'ont consulté

如何在 JavaScript 中从字符串创建元素？

Dans ce tutoriel, nous examinerons différentes manières de créer des éléments à partir de chaînes en JavaScript. Créer des éléments à partir de chaînes peut être très utile si nous devons générer des éléments de manière dynamique pour rendre le site Web interactif. Un exemple est comme dans l’application de liste de tâches où nous ajoutons, supprimons et modifions des éléments de tâches.

Méthode createElement()

Nous créons des éléments JavaScript en utilisant la méthode createElement(). Pour créer un élément spécifique, nous transmettons le nom de l'élément sous forme de chaîne dans la méthode createElement().

La fonction

createElement(tagName) a un paramètre comme nom de la balise qui sera créée à l'aide de cette méthode. Ici tagName est le nom du paramètre et il sera sous forme de chaîne. Notez qu'un seul élément est créé à partir d'une chaîne.

Grammaire

document.createElement("tagName")

Copier après la connexion

En position de tagName nous passons le nom du tag comme p (paragraphe), h1 (titre 1), img (image). createElement mettra tagName en minuscules afin que vous n'ayez pas à vous soucier de la casse.

Étapes

Étape 1 - Créez une chaîne en utilisant des valeurs d'éléments comme h3 et p
Étape 2 - Passez la chaîne en paramètre à la méthode createElement(). Attribuez une valeur à une variable. Cela créera les éléments dont nous avons besoin.
Étape 3 - Après avoir créé les éléments, nous attribuons le texte requis aux deux éléments à l'aide de l'attribut innerText.
ÉTAPE 4 - Après tout, append, nous utilisons la méthode append() ou appendChild() pour ajouter l'élément créé à la page Web afin qu'il soit visible par l'utilisateur Web.

Créons un titre et un paragraphe à partir de chaînes.

let string1="h3"
let string2="p"
let element1=document.createElement(string1)
let element2=document.createElement(string2)

Copier après la connexion

Vous devez donc comprendre comment nous créons un élément, mais créer un élément n'aide pas à afficher cet élément à l'utilisateur car il ne fait pas partie du DOM, nous devons plutôt en faire une partie du DOM en l'attachant à la page internet

Nous utilisons donc certaines méthodes comme append() et appendChild().

Exemple

Utilisez la méthode append() pour ajouter l'élément créé.

Dans l'exemple ci-dessous, nous avons créé deux éléments h3 et p en utilisant la méthode document createElement(). Attribuez ensuite du texte à ces éléments et utilisez la méthode append() pour ajouter les éléments au DOM. Enfin, affichez l'élément en utilisant l'attribut innerHTML.

<html>
<head>
   <title>Creating elements from string in JavaScriptnhi</title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.append(element1)
      document.body.append(element2)
   </script>
</body>
</html>

Copier après la connexion

Exemple

Ajoutez l'élément créé à l'aide de la méthode appendChild().

Dans l'exemple ci-dessous, nous créons deux éléments h3 et p en utilisant la méthode createElement() du document. Attribuez ensuite du texte à ces éléments et utilisez la méthode appendChild() pour ajouter les éléments au DOM. Enfin, utilisez l'attribut innerHTML pour afficher l'élément

<html>
<head>
   <title>Creating elements from string in JavaScript </title>
</head>
<body>
   <script>
      let string1="h3"
      let string2="p"
      let element1=document.createElement(string1)
      let element2=document.createElement(string2)
      element1.innerText="An h3 element using string"
      element2.innerText="A paragraph element using string"
      document.body.appendChild(element1)
      document.body.appendChild(element2)
   </script>
</body>
</html>

Copier après la connexion

Maintenant, vous pensez peut-être que le résultat du programme ci-dessus est le même, alors qu'est-ce qui différencie les deux programmes ?

Eh bien, oui, les deux sont utilisés pour ajouter des nœuds au document HTML, mais dans ce cas, la méthode append() renvoie le nœud ajouté, mais la méthode appendChildI() ne renvoie rien.

En utilisant la méthode append(), nous pouvons ajouter plusieurs éléments à la fois, mais dans la méthode appendChild(), nous ne pouvons ajouter qu'un seul élément à la fois.

document.body.append(element1, element2)

Copier après la connexion

Cela fera le même travail que

document.body.append(element1)
document.body.append(element2)

Copier après la connexion

En utilisant la méthode append(), DOMString et DOMNodes peuvent être ajoutés à l'élément parent, mais dans ce cas, seule la méthode appendChild() DOMNodes peut être ajoutée à l'élément parent.

Voici donc quelques-unes des façons dont nous pouvons créer des éléments à partir de chaînes.

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!