![[:moule_bite]](https://forum-images.hardware.fr/images/perso/moule_bite.gif "[:moule_bite]")
Pour la première partie, 3 ans en retard (mais vu que ça a été remonté, on va essayer d'éviter que les gens prennent de mauvaises habitudes)
Pour commencer le div "d" n'a rien de read-only.
Ensuite pour la première tentative ce n'est plus utilisé et invalide, et pour la 2e le problème est probablement que MSIE tente de récupérer "d" (par le getElementById) alors que celui ci n'existe pas encore > il récupère un objet vide qui n'a donc pas de innerHTML.
Donc on va commencer par corriger ça:
ta page HTML est normalement du type
<html>
<head>
<title></title>
</head>
<body>
<div id="d">
</div>
<body>
</html> |
(c'est le strict minimum)
dans la partie <head></head>, juste après le <title> il te faut ajouter un script:
<script type="text/javascript">
<!--
//-->
</script> |
Maintenant on crée la fonction qui fait la modification, donc un truc du style
function modify() {
var d = getElementById('d'); // toujours déclarer les variables qu'on utilise
if(d) // on vérifie si on a bien récupéré un élément dans "d"
d.innerHTML = "<p>toto</p>";
} |
Et maintenant il faut dire au navigateur "quand t'as fini de charger la page, tu lances ma fonction
window.onload = modify; // pas de "()", sinon ça tente d'exécuter la fonction |
Résultat:
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function modify() {
var d = document.getElementById('d'); // toujours déclarer les variables qu'on utilise
if(d) // on vérifie si on a bien récupéré un élément dans "d"
d.innerHTML = "<p>toto</p>";
}
window.onload = modify; // pas de "()", sinon ça tente d'exécuter la fonction
//-->
</script>
</head>
<body>
<div id="d">
</div>
<body>
</html> |
Fonctionne dans MSIE et Firefox, et Opera aussi
Pour plus d'infos sur innerHTML
En gros, le fonctionnement d'innerHTML c'est d'ajouter le texte qu'on lui donne directement dans le code source de la page et de reparser le tout. L'avantage c'est que c'est extrèmement rapide (de 2 à 20 fois plus rapide que le DOM) et que ça fonctionne dans la quasi totalité des navigateurs, l'inconvénient c'est qu'il est très dur de retourcher ensuite à ce qui a été créé via innerHTML
La deuxième méthode, c'est le DOM.
DOM, c'est le Document Object Model. En gros, quand un navigateur rencontre une page HTML il va construire un "arbre" pour représenter le document (c'est le DOM), et c'est cet arbre qu'on va modifier. On a donc beaucoup plus de fonctions, beaucoup plus complexes, mais c'est également beaucoup plus puissant et flexible.
Par contre faire du cross-browsers est un poil plus difficile.
Pour plus d'infos sur le DOM, retourner voir Quirksmode.
Gurney > les balises <i> et <b> sont dépréciées en HTML (parce qu'elles n'ont aucun intérêt, pour mettre en gras ou en italique on utilise les CSS)
Commence par lire la doc du DOM sur quirksmode, ça devrait t'aider.
Pour ton problème, c'est très simple:
1- on a deux nodes HTML <i> et <b>
2- on a 3 nodes de texte, "hello, ceci est", "un test" et " et la suite du texte"
Les fonctions dont on va avoir besoin sont:
document.createElement -> permet de créer une node HTML/XML, donc une balise
document.createTextNode -> permet de créer une node textuelle, donc du texte
element.appendChild -> permet d'ajouter un enfant à l'élément
Imaginons qu'on ait récupéré un élément du nom de "p" dans lequel on veut insérer nos machins:
Code :
- if(!document.getElementById||!document.createElement||!document.createTextNode)
- return /* ici, on va avoir besoin de createElement et createTextNode, on vérifie donc s'ils sont disponibles ou pas. S'ils ne le sont pas, on annule le script. Ca permet d'éviter les plantages à la con. On en profite pour vérifier getElementById, ça coute pas plus cher*/
- var p = document.getElementById('mon_element'); // On récupère l'élément dans lequel on insère le reste
- var bold = document.createElement("b" ); // on crée la balise <b>
- var italic = document.createElement("i" ); // on crée la balise <i>
- italic.appendChild(document.createTextNode('un test')); // On crée une node de texte "un test" et on l'insère comme enfant de <i>
- bold.appendChild(document.createTextNode('hello, ceci est ')); // Idem avec 'hello ceci est un' et la balise <b>
- bold.appendChild(italic); // puis on ajoute <i> comme enfant de <b>, derrière le texte (appendChild ajoute l'enfant en fin de liste)
- bold.appendChild(document.createTextNode(" et la suite du texte" ); // Et on ajoute la fin du texte
- p.appendChild(bold); // Enfin, on ajoute <b> comme enfant de l'élément qu'on avait récupéré
|
Pour détailler:
à la ligne 3 on a un élément
<machin/>
lignes 5 et 6, on crée deux éléments qui ne sont pas attachés au reste
donc on a <b/> et <i/> quelque part, on sait pas ou
Ligne 7, <i/> devient <i>un test</i>
Ligne 8, <b/> devient <b>hello, ceci est</b>
Puis avec la ligne 9 <b>hello, ceci est <i>un test</i></b>
Et enfin avec la ligne 10 <b>hello, ceci est <i>un test</i> et la suite du texte</b>
Pour terminer, la ligne 11 transforme <machin/> en
<machin><b>hello, ceci est <i>un test</i> et la suite du texte</b></machin>
Message édité par masklinn le 17-05-2005 à 09:11:30
---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
comment je fé moa ? ![[:sharpknife]](https://forum-images.hardware.fr/images/perso/sharpknife.gif "[:sharpknife]")
.innerHTML = 'hello';
encore une fois respect ! 
for ... in, c'est pour énumérer toutes les propriétés d'un objet. très pratique quand tu veux savoir tout ce qu'un objet contient ou quelles propriétés css il supporte : ta node d est un objet, d.style est un objet que tu peux aussi énumérer. et dès que tu as le nom de la propriété (for i in), tu peux faire un eval('d.' + i) pour connaître sa valeur. 
ca y est apres m'avoir aide tu veux me degouter ?? ![[:yaisse]](https://forum-images.hardware.fr/images/perso/yaisse.gif "[:yaisse]")
