Fonction à la hauteur de document.write [Résolu]

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

Citation:

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.

RomainVALERI · 07/01/2012, 11h13

Citation:

Envoyé par flozza

ça fait quand même du bordel de mettre des balises identifiées partout.

... ? Wow.... celle-là il fallait la trouver

Oui, tu as raison, elle est mal tenue cette ville

on va virer toutes les plaques de noms de rue et les numéros sur les maisons ça sera moins le bordel

06/01/2012, 00h37	#3
flozza Membre du Club Florian siles Webmaster Inscription : juin 2011 Messages : 59 Détails du profil Informations personnelles : Nom : Florian siles Localisation : France, Var (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Webmaster Secteur : Bâtiment Travaux Publics Informations forums : Inscription : juin 2011 Messages : 59 Points : 47 Points : 47	Merci NoSmoking! ça ressemble à ce qu'il me faut. C'est du DOM c'est ça ?
	10

06/01/2012, 23h21	#5
flozza Membre du Club Florian siles Webmaster Inscription : juin 2011 Messages : 59 Détails du profil Informations personnelles : Nom : Florian siles Localisation : France, Var (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Webmaster Secteur : Bâtiment Travaux Publics Informations forums : Inscription : juin 2011 Messages : 59 Points : 47 Points : 47	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.
	01

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email