Discussion :

[Uncle scrooge]

Bonjour à tous, je me demandais si il était possible d’envoyer grâce à .innerHTML par exemple plusieurs éléments dans une même balise (<div> ou autre...)

exemple :

le HTML

Code HTML :

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

 <div id=“Mon_id” ></div>

le JS :

Code :

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

1
2
3
 for (var i=1; i<5; i++) {
     document.getElementById(“Mon_id”).innerHTML=“Blabla”
}

Dans mon cas je cherche à insérer des input radio mais cela ne change pas ma question...

merci d’avance !

[Invité]

Bonjour,
Ce n'est pas en posant une question "vague" que tu auras une réponse précise.

1- Déjà, ce n'est pas “ ni ”, mais ".

Code html :

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

<div id="Mon_id"></div>

Code JavaScript :

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

1
2
3
4
5
"use strict";
const Mon_id = document.getElementById("Mon_id");
for (var i=1; i<5; i++) {
     Mon_id.innerHTML += "Blabla " + i + "<br/>";
}

On obtient ici :

Code html :

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

1
2
3
<div id="Mon_id">
   Blabla 1<br>Blabla 2<br>Blabla 3<br>Blabla 4<br>
</div>

2-

... mais cela ne change pas ma question...

Ben si, justement...
Car alors on n'utilise pas innerHTML, mais plutôt des document.createElement() et .appendChild().

Exemple :

Code JavaScript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"use strict";
const Mon_id = document.getElementById("Mon_id");
 
// Solution 1 : création p label input : createElement + appendChild
let p = document.createElement("p");
let label = document.createElement("label");
label.textContent = "Mon input : ";
let input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","input1");
input.setAttribute("value","");
input.setAttribute("placeholder","entrez une valeur");
// insertion dans le DOM
Mon_id.appendChild(p);
p.appendChild(label);
p.appendChild(input);

On obtient ici :

Code html :

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

1
2
3
<div id="Mon_id">
   <p><label>Mon input : </label><input type="text" name="input1" value="" placeholder="entrez une valeur"></p>
</div>

[Uncle scrooge]

Merci beaucoup, pour ce qui est des quotes excusez moi je n’avais pas trouvé les bons j’avais essayé de trouver mieux que les guillemets français... et merci de votre aide, Je ne connaissait pas les .appendChild() qui sont en effet très utiles.

Cependant, en poursuivant de mon côté les recherches, j’avais trouvé le .insertAdjacentHTML() qui m’a résolu le problème. Après, j’ignore si c’est une bonne idée selon vous pour des balises <input>...

[Invité]

element.insertAdjacentHTML() est une autre méthode, tout aussi valable.

insertAdjacentHTML() analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée.

Ça évite de créer et insérer (.createElement + .appendChild) chaque élément (p, label, input,...) : il suffit d'écrire le code sous sa forme HTML.
.insertAdjacentHTML() se charge du reste.

exemple : https://codepen.io/jreaux62/pen/LYVybGW

Code :

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

1
2
3
4
5
6
"use strict";
const Mon_id = document.getElementById("Mon_id");
 
// Solution 2 : création p label input : insertAdjacentHTML
let p_input_html = '<p><label>Mon input 2 : </label><input type="text" nmae="input2"value="" placeholder="entrez une valeur 2"></p>';
Mon_id.insertAdjacentHTML( 'beforeend', p_input_html );

N.B. Il est toujours bon de savoir qu'il existe différentes solutions...