Créer une div dynamique en Javascript

Comment puis-je créer une div dynamique au sein d'une fonction, comme ceci:Créer une div dynamique en Javascript

<div id="mydiv" class="notice" style="display:none;"> 
</div>

Ce serait très bien si je pouvais créer aussi avec la bibliothèque jquery.

Source

2009-12-25 streetparade

var div = document.createElement("div"); 
div.setAttribute("id", "mydiv"); 

div.className = "notice"; 
div.style.display = "none"; 

// test case, append the div to the body 
document.body.appendChild(div);

ou avec jQuery

$("<div id='mydiv' class='notice' style='display: none;'></div>").appendTo("body");

Soyez prudent car dans l'approche jQuery un élément est créé et sa propriété innerHTML définie sur le balisage donné. Il est donc à la fois assez flexible et limité.

Source

2009-12-25 20:42:06

les travaux de la fonction jquery mais il insère au et du corps – streetparade

qui est parce que mon testcase a le « appendTo » à la fin. retirez-le et utilisez-le comme bon vous semble. –

même si je supprime document.body.appendChild (div); il ne fonctionne vraiment pas, – streetparade

-2

En utilisant tout simplement DOM:

var mydiv = document.createElement("div"); 
mydiv.setAttribute("id", "mydiv"); 
mydiv.setAttribute("class", "notice"); 
mydiv.setAttribute("style", "display:none;"); 
whateverContainer.appendChild(mydiv);

Source

2009-12-25 20:51:04

non, pour les classes CSS, vous devez utiliser l'attribut className. –

'setAttribute ('class', '...')' est correct, mais ne fonctionne pas dans IE pré-v8 car IE ne connaît pas la différence entre un attribut ('class') et une propriété (' className '). Vous devriez toujours utiliser les propriétés HTML du DOM niveau 1 ('mydiv.id = 'caché'; mydiv.className = 'avis'; mydiv.style.display = 'none') plutôt que' setAttribute' en partie à cause de ces bogues IE et en partie parce que la propriété est beaucoup plus simple et plus facile à lire. – bobince

Huh. Je pensais que les raccourcis de propriétés étaient des choses inventées par le navigateur qui n'entraient jamais dans les spécifications DOM. Je vois [je me trompe] (http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html). Merci, bobince. –

Création de l'élément avec jQuery lui permettra d'être référencé par nom de variable

var div=$(document.createElement('div')) 
    .attr({id: 'myDiv'}) 
    .addClass('myNotice');

Maintenant, nous pouvons référencer la variable div dans le reste de notre script .

//put it where you want 
$('#someElement').append(div.hide()); 

//bind some events 
div.mouseenter(function(){ 
    var offset=div.offset(); 
    //more code 
});

Source

2009-12-25 21:10:37 czarchaic

Créer une div dynamique en Javascript

Répondre

Questions connexes