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