Programmation web / Javascript / créé des élément avec js

Créé des éléments avec Javascript

Voici des exemples de différent élément HTML créé en Javascript :

Attention ceci n'est pas la façon la plus simple de procédé en utilisant JQuery chacun des code peux se faire en une ligne de programmation.

<script src="jquery.js" language="javascript" type="text/javascript"></script>
<div id="place"></div>

<script language="javascript" type="text/javascript">
$('<a href=# >Lien ajouter avec JQUERY</a>').appendTo('#place');
</script>

Voici un exemple pour créé un menu déroulant (Select)

<div id="place_select"></div>

<script language="javascript" type="text/javascript">

var arrMois = new Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout",
                                                "Septembre","Octobre","Novembre","Decembre");

var place_select = document.getElementById('place_select');

var nouv_select = document.createElement('select');

for (i =0; i <12; i++)
{
    nouv_select.options[i] = new Option(arrMois[i], 'value',true);
}

nouv_select.options[5].selected="selected"; // choisir celui sélectionné

place_select.appendChild(nouv_select);

</script>

Créé un DIV

var div = document.createElement("div");
div.id = 'id_du_div';
div.style.backgroundImage = 'url(LIEN url de l'image)';
div.style.position = 'fixed';
div.style.bottom = 0;
div.style.padding = 0;
div.style.margin = 0;
div.style.marginBottom = '10px';
div.style.height = '90px';
div.style.width = '100%';

Créé un lien

var a_cree= document.createElement("a");
a_cree.id = 'id_lien';
a_cree.href = '#';
a_cree.style.position = 'absolute';
a_cree.style.top = '5px';
a_cree.style.right = '45px';
a_cree.style.fontSize = '14px';
a_cree.style.color = 'black';
a_cree.style.backgroundColor = 'white';
a_cree.style.padding = '7px';

Créé vidéo flash

var obj_flash = document.createElement('object');
    obj_flash.setAttribute('type','application/x-shockwave-flash');
    obj_flash.setAttribute('width',728);
    obj_flash.setAttribute('height',90);
    obj_flash.setAttribute('data','http://annevankesteren.nl/test/flash/embed/vuurwerk.swf');
    var p_m = document.createElement('param');
    p_m.setAttribute('name','movie');
    p_m.setAttribute('value','http://annevankesteren.nl/test/flash/embed/vuurwerk.swf');
    obj_flash.appendChild(p_m);
    div.appendChild(obj_flash);

Créé du texte

objtxt = document.createTextNode("texte afficher");

Créé un script

var obj_script = document.createElement('script');
    obj_script.type = 'text/javascript';
    obj_script.src = 'lien_script';

    div.appendChild(obj_script);

Modifier la couleur: