Mettre à jour le contenu d'un div avec javascript

Question

Plutôt que d'essayer de créer des tonnes de pages différentes sur mon site, j'essaie de mettre à jour le contenu d'un div lorsque différents éléments de la barre de navigation sont mis à jour . J'ai essayé de trouver un exemple simple en utilisant Javascript:

 <script type="text/javascript"> 
      function ReplaceContentInContainer(id,content) { 
       var container = document.getElementById(id); 
       container.innerHTML = content; 
      } 
     </script> 


      <div id="example1div" style="border-style:solid; padding:10px; text-align:center;"> 
      I will be replaced when you click. 
     </div> 
     <a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>')"> 
      Click me to replace the content in the container. 
     </a> 

Cela fonctionne très bien lorsque je tente seulement et mettre à jour le texte, mais quand je mets une balise img là-dedans, comme vous pouvez le voir, il cesse de fonctionner.

Soit 1) quel est le problème avec la façon dont j'essaie de le faire? ou 2) Quelle est la meilleure façon de le faire?

Je ne suis pas bloqué sur Javascript. jQuery fonctionnerait aussi, aussi longtemps que c'est aussi simple ou facile. Je veux créer une fonction qui me laissera passer n'importe quel HTML que je veux mettre à jour et l'insérer dans la balise div et sortir le 'vieux' HTML.

Answer 1

Vous avez juste des problèmes qui s'échappent:

ReplaceContentInContainer('example1div', '<img src='2.jpg'>') 
               ^ ^

La ' intérieure doivent être protégés, sinon le moteur JS verra ReplaceContentInContainer('example1div', '<img src=' ainsi que quelques erreurs de syntaxe résultant de la 2.jpg'>') ultérieure. Changer l'appel à (pointe du chapeau à cHao' answer au sujet d'échapper à la < et > dans le code HTML):

ReplaceContentInContainer('example1div', '<img src=\'2.jpg\'>') 

Une façon simple de le faire avec jQuery serait d'ajouter une pièce d'identité à votre lien (par exemple, " idOfA "), puis utilisez les html() function (ce qui est plus multiplateforme que l'utilisation innerHTML):

<script type="text/javascript"> 
    $('#idOfA').click(function() { 
     $('#example1div').html('<img src="2.jpg">'); 
    }); 
</script> 

Answer 2

votre principal problème avec votre exemple (en plus que innerHTML est pas toujours pris en charge) est que < et > peut facilement se casser HTML si ils ne sont pas esc aped. Utilisez < et > à la place. (Ne vous inquiétez pas, ils seront décodés avant que le JS les voit.) Vous pouvez utiliser la même astuce avec des guillemets (utilisez " au lieu de " pour contourner les problèmes de cotation).

Answer 3

Tout d'abord, ne mettez pas de code JavaScript complexe dans les attributs href. C'est difficile à lire ou à maintenir. Utilisez la balise <script> ou placez votre code JavaScript dans un fichier distinct.

Ensuite, utilisez jQuery. JavaScript est une bête étrange: les principes sous-jacents à ses modèles n'ont pas été conçus en pensant au développement web moderne. jQuery vous donne beaucoup de puissance sans vous faire miroiter dans les bizarreries de JavaScript. Troisièmement, si votre objectif est d'éviter de dupliquer indéfiniment la même structure de base pour toutes (ou plusieurs) de vos pages, pensez à utiliser un système de modèle. Les systèmes de modèles vous permettent de brancher du contenu spécifique dans des échafaudages contenant les éléments communs de votre site. Si cela semble compliqué, c'est parce que je ne l'ai pas bien expliqué. Google et vous trouverez beaucoup de bonnes ressources. S'appuyant sur JavaScript pour la navigation signifie que votre site ne sera pas indexé correctement par les moteurs de recherche et sera complètement inutilisable pour quelqu'un avec JavaScript désactivé. Il est de plus en plus commun - et acceptable - de s'appuyer sur JavaScript pour les fonctionnalités de base. Mais votre site devrait, au minimum, fournir des pages discrètes avec des URL sensibles et durables.Maintenant, tout cela dit, passons à votre question. Voici une façon de l'implémenter dans jQuery. Ce n'est pas traditions les plus chics, la mise en œuvre plus serré, mais j'ai essayé de faire quelque chose de très lisible:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery Example</title> 
    <style type="text/css" media="all"> 
     /* all content divs should be hidden initially */ 
     .content { 
      display: none; 
     } 

     /* make the navigation bar stand out a little */  
     #nav { 
      background: yellow; 
      padding: 10px; 
     } 
    </style> 
</head> 
<body> 
    <!-- navigation bar --> 
    <span id="nav"> 
     <a href="#about_me">about me</a> | 
     <a href="#copyright">copyright notice</a> | 
     <a href="#my_story">a story</a> 
    </span> 

    <!-- content divs --> 
    <div class="content" id="about_me"> 
     <p>I'm a <strong>web developer</strong>!</p> 
    </div> 
    <div class="content" id="copyright"> 
     <p>This site is in the public domain.</p> 
     <p>You can do whatever you want with it!</p> 
    </div> 
    <div class="content" id="my_story"> 
     <p>Once upon a time...</p> 
    </div> 

    <!-- jquery code --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
    <script> 
    // Wait for the document to load 
    $(document).ready(function() { 
     // When one of our nav links is clicked on, 
     $('#nav a').click(function(e) { 
      div_to_activate = $(this).attr('href'); // Store its target 
      $('.content:visible').hide(); // Hide any visible div with the class "content" 
      $(div_to_activate).show(); // Show the target div 
     }); 
    }); 
    </script> 
</body> 
</html> 

Ok, espérons que cette aide! Si jQuery semble attrayant, envisagez de commencer par this tutorial.