Comment puis-je créer un nouvel élément (division) et lui affecter un ID ? [Résolu]

[joums]

Bonjour,

je souhaite par JQUERY créer un élément (une div) en cliquant sur un bouton
et lui affecter un nouvelle ID.

Voici mon début de code mais je bloque

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 <div id="blok">  
        <div id="sousblok">
        </div>
    </div>
<div id="bouton">
        <button onclick="test();">cliquez</button>
    </div>
 
function test (){
  $('<div id = 'blok'<div/>)
    .appendTo('body');
}

Merci de votre aide

[omar24]

teste :

Code :

1
2
var ht = "<div id='blok'> <div id='sousblok'></div></div>";
$("body").append(ht);

[joums]

Envoyé par omar24

teste :
var ht = "<div id='blok'> <div id='sousblok'></div></div>";
$("body").append(ht);

merci pour votre réponse
cela crée bien les 2 divs mais comment incrémenter leur ID
par exemple sousblok1 puis sousblok2 etc.... à chaque création d'une div

[omar24]

Teste ce code:

Code :

1
2
3
4
5
6
 var ind = 0;
function test (){
var ht = "<div id='blok"+ind+"'> <div id='sousblok"+ind+"'></div></div>";
$("body").append(ht);
ind+=1;
}

[joums]

Envoyé par omar24

Teste ce code:

Code :

1
2
3
4
5
6
 var ind = 0;
function test (){
var ht = "<div id='blok"+ind+"'> <div id='sousblok"+ind+"'></div></div>";
$("body").append(ht);
ind+=1;
}

merci

voici le code que j'ai fait

Code :

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
					var currentValue = 0;
					$("#block").click(function () {
						currentValue++;
						var monContenu = '<div class="element2" id="boite'+ currentValue +'">'+ currentValue +'</div>';
						$("#reception").append(monContenu);
						//alert(currentValue);
		                                                               });
											});

[omar24]

Alors ça fonctionne?

[danielhagnoul]

Bonsoir

FAQ jQuery : Comment puis-je créer un nouvel élément du DOM ?

[joums]

Bonjour,

Merci pour vos réponses, j'ai adapté le code et cela marche

Code :

1
2
3
4
5
6
7
8
9
 
$(document).ready(function(){
//carre
var currentValueJ1 = 0;
$("#carreNoir").click(function () {
currentValueJ1++;
var monContenu = '<div class="element1" id="boite'+ currentValueJ1 +'">'+ currentValueJ1 +'</div>';
$("#reception").append(monContenu);
														});

Je souhaite à présent pouvoir déplacer l'élément créé. Je pensais utiliser l'évênement "Live" mais cela ne marche pas (en utilisant l'ID crée ou bien sa classe)
Voici le code que j'ai commencer

Code :

1
2
3
4
 
$("#boite1").live("mousedown", function(){ //boite1 étant l'ID du nouvel élement.
$(this).draggable({ containment: "#reception", scroll: false });
});

Merci pour vos suggestions

[omar24]

tu travailles avec jQuery UI?

[joums]

Envoyé par omar24

tu travailles avec jQuery UI?

Je suis débutant .... j'ai lu pas mal de tuto, et je m'inspire des API jquery

J'ai vu que live() était une solution dans mon cas (à la place de Bind)

[omar24]

alors essaye de télécharger jquery ui(fais une recherche de jquery ui dans google vous trouverez le site officiel facilement), aprés tu peux rendretes éléments "draggable" comme suit:

Code :

$("#draggable").draggable();

consulte ce lien

[joums]

Envoyé par omar24

alors essaye de télécharger jquery ui(fais une recherche de jquery ui dans google vous trouverez le site officiel facilement), aprés tu peux rendretes éléments "draggable" comme suit:

Code :

$("#draggable").draggable();

consulte ce lien

Ce que j'ai fait, l'évênenement draggable marche.

Mais cela marche dans un fichier où il y a déjà 2 "carrés" déjà chargé.

Mais ca ne marche plus quand je créé les carrés

[omar24]

j'ai une proposition mais je ne suis pas sur, essaye de faire sortir le code de la fonction ready? car le code appelé à l’intérieur de cette méthode est appelé après le chargement de la page c'est à dire après un rafraîchissement.

[joums]

Envoyé par omar24

j'ai une proposition mais je ne suis pas sur, essaye de faire sortir le code de la fonction ready? car le code appelé à l’intérieur de cette méthode est appelé après le chargement de la page c'est à dire après un rafraîchissement.

j'ai réussi, en laissant dans la function ready.
Mais lorsque je l'adapte au code final, cela ne marche plus,
je vais tout regarder pour voir si je me suis pas trompé quelque part.

Je te tiens au courant avec le code finalisé
encore merci