Discussion :

[Zephire]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci

[psychadelic]

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

[SpaceFrog]

Deux petites remarques à propose de ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Zephire]

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 ?

[psychadelic]

Qu'en pensez-vous ?

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

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

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

[Invité]

+1 psychadelic

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


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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Watilin]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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