Mettre une ligne de HTML dans une variable

Salut, je débute en Javascript.
En Javascript pur (pas de jQuery !) , est-il possible de mettre une ligne complète de HTML dans une variable ?
Voici ce que je veux faire, afin d'obtenir une variable nommée "plus" :

Code:

---

var plus = "<span class='icon is-medium'><i class='far fa-plus-square'></i></span>\n";

---

Merci

jQuery est une librairie écrite en JavaScript,
donc tout ce que peut faire jQuery est forcément faisable en JavaScript.

Deux petites remarques à propose de ton code

Code:

---

var plus = "<span class='icon is-medium'><i class='far fa-plus-square'></i></span>\n";

---

A mon avis il est préférable Je te conseille d'inverser plutot ton ordre de quotes pour des raisons de lisibilité

Code:

---

var plus = '<span class="icon is-medium"><i class="far fa-plus-square"></i></span>\n';

---

Deuxième petit point \n en HTML est inutile => <br/>

Merci pour vos réponses. Je précise que j'apprends surtout le PHP et Symfony pour mon diplôme. Mais il faut bien sûr que j'apprenne un minimum de Javascript pour prétendre à un poste.

Mon formateur m'a répondu qu'en pur Javascript il faut construire un DOMElement et ne pas procéder comme dans mon extrait de code.

Qu'en pensez-vous ?

Citation:

---

Envoyé par Zephire

Qu'en pensez-vous ?

---

que t'es completement à coté de ce que te demande ton prof 8-)

https://developer.mozilla.org/fr/doc.../createElement

https://developer.mozilla.org/fr/doc...ment/classList

+1 psychadelic

(bien qu'ici, passer par la création d'éléments du DOM est, à mon avis, "inutilement" fastidieux pour "si peu" :aie: ).


Mais si je reviens sur la remarque de SpaceFrog, il faut écrire :

Code:

---

var plus = '<span class="icon is-medium"><i class="far fa-plus-square"></i></span>' . "\n";

---

"\n" fait un passage à la ligne dans le code (pas à l'affichage). Ça peut améliorer la lisibilité du code *.
Et ici, les " sont obligatoires.


(* quoique j'en vois mal l'intérêt après un <span> !)

Bonjour,

Citation:

---

Envoyé par Zephire

Mon formateur m'a répondu qu'en pur Javascript il faut construire un DOMElement et ne pas procéder comme dans mon extrait de code.

Qu'en pensez-vous ?

---

ton formateur a raison sur le fond, je pense que tu utilises innerHTML, il est toujours préférable d'utiliser les méthodes dédiées du DOM pour construire, sans dommage collatéral éventuel, de nouveaux éléments.

Donc plutôt que

Code:

---

1 2 3

var html = '<span class="icon is-medium"><i class="far fa-plus-square"></i></span>'; var oDest = document.getElementById("conteneur"); oDest.innerHTML = html;

---

il est préférable d'écrire

Code:

---

1 2 3 4 5 6 7 8 9

var oDest = document.getElementById("conteneur"); var oSpan = document.createElement("SPAN"); var oElem = document.createElement("I"); // affectation directe des classes sur les objets javascript oSpan.className = "icon is-medium"; oElem.className = "far fa-plus-square"; // ajout aux parents en remontant l'arbre oSpan.appendChild(oElem); oDest.appendChild(oSpan);

---

c'est bien plus verbeux mais accessoirement plus clair.

Il existe une autre méthode, ma foi assez peu utilisée, la méthode insertAdjacentHTML qui est une extension de l'interface Element.

Code:

---

1 2 3

var html = '<span class="icon is-medium"><i class="far fa-plus-square"></i></span>'; var oDest = document.getElementById("conteneur"); oDest.insertAdjacentHTML("beforeend", html); // équivalent à appendChild

---

et pour le coup tu respectes les consignes de ton formateur.

Juste pour être exhaustif, je rajoute qu’il existe aussi la méthode insertAdjacentElement :

Code:

---

1 2 3 4 5 6 7 8 9 10

var oDest = document.getElementById("conteneur"); var oSpan = document.createElement("SPAN"); var oElem = document.createElement("I"); // affectation directe des classes sur les objets javascript oSpan.className = "icon is-medium"; oElem.className = "far fa-plus-square"; // ajout aux parents en remontant l'arbre oSpan.appendChild(oElem);   oDest.insertAdjacentElement("beforeend", oSpan);

---