11540 sujets

JavaScript, DOM et API Web HTML5

Hello à tous,

Voici donc mon problème : je souhaite remplacer le contenu d'une div par le biais de boutons, mais au lieu de ça, la fonction document write se permet de réécrire sur toute la page.

Comment faire en sorte de cibler le nouveau contenu dans ma balise "contenu"?


<html>

<head>
<title>Exemple de document.write</title>

<script type="text/javascript">

function nouveauContenu(content)
{
document.write(content);
document.close();
}

</script>

</head>

<body>

Contenu à conserver

<div id="contenu">
  <a href="" class="Style1" onClick="nouveauContenu('<h1>Ceciiii est le contenu original du document.<h1>')"></a>
<input name="button" type="button" value="button" onClick="nouveauContenu('<h1>Ceci est le contenu secondaire.<h1>')">
<p>Ceci est le contenu original du document.</p>
</div>

</body>
</html>


Merci à vous
Modifié par MasterPingouin (27 Mar 2007 - 18:06)
C'est le comportement normal de document.write qui se comporte différemment quand il est dans le body que quand il est dans le head.

Plus d'infos : http://developer.mozilla.org/fr/docs/DOM:document.write

Note perso : le Mozilla Developer Center rocks.

Comme l'usage de document.write est de toute façon déconseillé (et même interdit quand on sert la page en application/xml+xhtml), essaye plutôt de trouver une solution ne l'employant pas.

Si tu es débutant, je pencherai pour l'usage de innerHTML qui n'est pas très élégant mais qui à l'avantage d'être simple et compatible avec tous les navigateurs gérant Javascript.

Sinon, j'irai voir du côté du DOM. Par exemple, le script innerDOM disponible ici : http://innerdom.sourceforge.net/

Et il serait préférable de d'abord valider ta page HTML avant de te lancer dans le Javascript, histoire d'éviter les erreurs bêtes.

Bonne continuation
Merci beaucoup, je vais me pencher sur le innerHTML.
Son équivalent le InnerDom semble poser des problèmes de rapidité d'affichage avec certains navigateurs.
Modifié par MasterPingouin (27 Mar 2007 - 18:05)