Fonction à la hauteur de document.write

**flozza** · 05/01/2012, 22h45

Bonjour

J'essaye de créer une version sur mon site pour ceux qui n'ont pas javascript activé. Mais je remarque que document.write est plus performant que innerHTML, seulement j'ai vu que document.write était à proscrire. Je dis + performant car il demande moins de ligne à écrire en code, et surtout affiche l'élément tel quel <= oui par exemple:

Code :

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
17
18
19
20
<ul id="maintab" class="shadetabs">
 
        <li class="selected">
				<script>
		<!--
document.write("<a href=\"#\" rel=\"tcontent1\">");
// -->
</script>
	<noscript><a href="index.php?pg=profil&tc=infos" rel="tcontent1"></noscript>
	Mon compte</a></li>
 
    <li><a href="#" rel="tcontent2">onglet 2</a></li>
 
    <li><a href="#" rel="tcontent3">onglet 3</a></li>
 
	   <li><a href="#" rel="tcontent4">onglet 4</a></li>
 
 
 
</ul>

Ce sont des onglets. ça marche parfaitement. mais si je fais comme ça:

Code :

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
17
18
19
 
<ul id="maintab" class="shadetabs">
 
        <li class="selected" id="content1js">
				<script>
		<!--
document.getElementById("content1js").innerHTML = <a href=\"#\" rel=\"tcontent1\">
// -->
</script>
	<noscript><a href="index.php?pg=profil&tc=infos" rel="tcontent1"></noscript>
	Mon compte</a></li>
 
    <li><a href="#" rel="tcontent2">onglet 2</a></li>
 
    <li><a href="#" rel="tcontent3">onglet 3</a></li>
 
	   <li><a href="#" rel="tcontent4">onglet 4</a></li>
 
</ul>

et bien le lien s'affiche, mais il n'est pas cliquable, et n'hérite pas de la classe parent. (c'est un menu à onglet)

Alors comment faire pour remplacer document.write efficacement ?

**NoSmoking** · 06/01/2012, 00h06

Bonsoir,
innerHTML est à peine mieux que document.write, il te faut passer par les méthodes de constructions dynamiques comme createElement, createTextNode

un petit exemple

Code html :

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
17
18
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[Création dynamique]</title>
</head>
<body>
<div id="ici"></div>
<script type="text/javascript">
  var oDest = document.getElementById('ici');
  var oLien = document.createElement('A');
  var oText = document.createTextNode('le texte du lien');
  oLien.appendChild( oText);
  oLien.href = "nom_page.html";
  oDest.appendChild( oLien);
</script>
</body>
</html>

**flozza** · 06/01/2012, 00h37

Merci NoSmoking! ça ressemble à ce qu'il me faut.
C'est du DOM c'est ça ?

**RomainVALERI** · 06/01/2012, 10h51

Envoyé par flozza

C'est du DOM c'est ça ?

Ouep ^^

Conclusion double :
> document.write à bannir
> innerHTML à utiliser le moins possible, ou disons à réserver pour des cas spécifiques ou il y a des raisons explicites pour ne pas utiliser les méthodes DOM

**flozza** · 06/01/2012, 23h21

Merci de votre aide à tous les deux. Même si je ne peux pas l'implémenter partout, ça fait quand même du bordel de mettre des balises identifiées partout.