Insérer plusieurs éléments dans une même <div>

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:

---

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

---

le JS :

Code:

---

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 !

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

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

Code:

---

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

---

Code:

---

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:

---

1 2 3

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

---

2-

Citation:

---

Envoyé par Uncle scrooge

... 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:

---

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:

---

1 2 3

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

---

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...:mrgreen: 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>...

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

Citation:

---

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:

---

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