Ancre dynamique en javascript accessible

<SCRIPT LANGUAGE="JavaScript">
/* Variable Definition */

vgn_movie_inline = 3;
movie_number = 1;

/*Array Definition*/
movie_vignet = new Array;
movie_description = new Array;
movie_big = new Array;
movie_title = new Array;

var HazMess=new Array();
	movie_title[0]= 'Episode 6'
	movie_description[0]= 'Description'
	movie_vignet[0]= 'image.jpg'
	movie_big[0]= 'http://www.youtube.com/embed/OahP1ehXzWg?rel=0'	
	

	movie_title[1]= 'Episode 5'
	movie_description[1]= 'Description'
	movie_vignet[1]= 'image.jpg'
	movie_big[1]= 'http://www.youtube.com/embed/OahP1ehXzWg?rel=0'

	movie_title[2]= 'Episode 4'
	movie_description[2]= 'Description'
	movie_vignet[2]= 'image.jpg'
	movie_big[2]= 'http://www.youtube.com/embed/OahP1ehXzWg?rel=0'
	
	
/*Function ChargeMovie*/
function ChargeMovie(num)
	{
	if(document.getElementById)
		document.getElementById("movie_dyn_mov").innerHTML = '<TABLE class="table_movie"><TR><TD class="td_movie"><h4 style="font-weight:bold;padding:0">'+movie_title[num]+'</h4><iframe width="450" height="253" frameborder="0" allowfullscreen="" src="'+movie_big[num]+'"></iframe><br /><div class="movie_description">'+movie_description[num]+'</div></TD></TR></TABLE>';
	else
		window.open(movie_big[num],"_blank")
	}


/*Write*/
document.write('<DIV ID=movie_dyn_mov><TABLE class="table_movie"><TR><TD class="td_movie"><h4 style="font-weight:bold;padding:0">'+movie_title[0]+'</h4><iframe width="450" height="253" frameborder="0" allowfullscreen="" src="'+movie_big[0]+'"></iframe><br /><div class="movie_description">'+movie_description[0]+'</div></TD></TR></TABLE></DIV>');


document.write('<hr color="#cccccc" /><table class="table_movie">');
for(a=0;a<movie_big.length;a++)
	{
	if(movie_number == 0)
		document.write('<tr>');
	else
		document.write('<td class="td_movie_vng">');
	document.write('<A HREF="javascript:ChargeMovie('+a+')"><IMG SRC="../'+movie_vignet[a]+'" style="margin:20px" ALT="'+movie_title[a]+'"><div style="margin: 20px">'+movie_title[a]+'</div></A></TD>')
	if(movie_number == vgn_movie_inline)
		{
		document.write('</Tr>');
		movie_number=3;
		}
	movie_number++;
	}
document.write('</table>');
</SCRIPT>

<div id="ancre"></div>
<TABLE class="table_movie">
	<TR>
		<TD class="td_movie">
			
			<div id="title_movie"><h4></h4></div>
			<div id="iframe_movie"></div>
			<br /><div id="description_movie" class="movie_description"></div>
		</TD>		
	</TR>
</TABLE>

<SCRIPT LANGUAGE="JavaScript">
/* Variable Definition */

var vgn_movie_inline = 3;
var movie_number = 1;

/*Array Definition*/
var movie_vignet = [];
var movie_description = [];
var movie_big = [];
var movie_title = [];
var ancre= [];
	
	movie_title[0]= 'Episode 6',
	movie_description[0]= 'Description',
	movie_vignet[0]= 'image.jpg',
	movie_big[0]= 'http://www.youtube.com/embed/OahP1ehXzWg?rel=0',
	ancre[0]= 'ancre0',

	movie_title[1]= 'Episode 5'
	movie_description[1]= 'Description1'
	movie_vignet[1]= 'image.jpg'
	movie_big[1]= 'http://www.youtube.com/embed/OahP1ehXzWg?rel=0'
	ancre[1]= 'ancre1'

	movie_title[2]= 'Episode 4'
	movie_description[2]= 'Description2'
	movie_vignet[2]= 'image.jpg'
	movie_big[2]= 'http://www.youtube.com/embed/OahP1ehXzWg?rel=0'
	ancre[2]= 'ancre2'

/*Function ChargeMovie*/
function ChargeMovie(num)
	{
	if(document.getElementById){
		document.getElementById("ancre").innerHTML = '<a id="'+ancre[num]+'">';
		document.getElementById("iframe_movie").innerHTML = '<iframe width="450" height="253" frameborder="0" allowfullscreen="" src="'+movie_big[num]+'"></iframe>';
		document.getElementById("title_movie").innerHTML = movie_title[num];
		document.getElementById("description_movie").innerHTML = movie_description[num];
		}
	else{
		Window.open(movie_big[num],"_blank");
		}
	}

/*Write*/
document.getElementById("iframe_movie").innerHTML = '<iframe width="450" height="253" frameborder="0" allowfullscreen="" src="'+movie_big[0]+'"></iframe>';
document.getElementById("title_movie").innerHTML = movie_title[0];
document.getElementById("description_movie").innerHTML = movie_description[0];


document.write('<hr color="#cccccc" /><table class="table_movie"><tr>');
for(a=0;a<movie_big.length;a++)
	{
	if(movie_number == 0){
		}
	else{
		document.write('<td class="td_movie_vng"><A onclick="ChargeMovie('+a+'); return false;" href="#'+ancre[a]+'"><IMG SRC="../'+movie_vignet[a]+'" style="margin:20px" ALT="'+movie_title[a]+'"><div style="margin: 20px">'+movie_title[a]+'</div></A></TD>')
		}
	if(movie_number == vgn_movie_inline){
		document.write('</Tr>');
		movie_number=0;
		}
	movie_number++;
	}
document.write('</table>');
</SCRIPT>

  
(function(){

// je trouve le parent dans lequel je souhaite insérer mon code, et qui servira ensuite pour la délégation d'evenement.
   var parentEl = document.getElementById('main-content');
   
   //createDocumentFragment est là pour des raisons de performances, les manip du DOM coûtent chère en mémoire, cela va créer un élément en dehors du DOM un fragment, avec lequel travailler pour au final l’insérer dans le navigateur (voir "memory repaint reflow" ).
   var docFrag = document.createDocumentFragment();
   var hrEl = document.createElement('hr');
   hrEl.className = 'special-color-hr'; // dans le css .special-color-hr { color : #cccccc;}
   docFrag.appendChild(hrEl);
   var tableMovieEl = document.createElement('table');
   tableMovieEl.className = "table_movie";
   
   //pour l'exemple à retirer ensuite.
   var movie_big = ["test","test1","test2"];
   // fin exemple
   
   // var movieBigLen = movie_big.length; // si jamais grand tableau.
   // si grand tableau for ([#darkred]var[/#] i = 0 , i < movieBigLen ; i++)
   for ([#darkred]var[/#] i = 0; i < movie_big.length; i++) {
   		var trEl = document.createElement('tr');
   		var tdEl = document.createElement('td');
   		
   		// ici tu édites tdEL, cherches tu vas trouver.
   		// aEl doc createEl ; aEl.href ; tdEl appendChild a 
   		// imgEl doc createEl ; imgEL.src ; tdEl appendChild imgEL
   		
   		var text = document.createTextNode(movie_big\[i\]); // les \ devant les crochets doivent être retirés.
   		tdEl.appendChild(text);
   		
   		
   		// ici on insére.
   		trEl.appendChild(tdEl);
   		tableMovieEl.appendChild(trEl);
   }
   
   docFrag.appendChild(tableMovieEl);
   

   // j'insère le fragment dans le parent.
   parentEl.appendChild(docFrag);

}();