使用javascript更新div的内容

问题描述：

与其试图在我的网站上创建大量不同的页面，我试图在导航栏中的不同项目单击以更新maint div内容时更新单个div的内容。我试着使用Javascript功能来找到一个简单的例子：使用javascript更新div的内容

 <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>

这只是正常的时候，我只尝试和更新的文字，但是当我把img标签在那里，你可以看到，它停止工作。

要么 1）我如何试图做到这一点有什么问题？或2）什么是更好/更简单的方法来做到这一点？

我没有卡在Javascript上。只要它简单或容易，jQuery也可以工作。我想创建一个函数，让我通过我想要更新的任何HTML并将其插入到div标签中，并取出“旧”HTML。

答

你只是有一些逃避的问题：

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

内'需要进行转义，否则JS引擎会看到ReplaceContentInContainer('example1div', '<img src='加上后续2.jpg'>')造成一些语法错误。呼叫更改（帽子的尖端cHao' answer关于逃避<和>在HTML）：

ReplaceContentInContainer('example1div', '&lt;img src=\'2.jpg\'&gt;')

一个简单的方法来做到这一点与jQuery将一个ID添加到您的链接（比如，“ idOfA“），然后使用html() function（这是更多的跨平台比使用innerHTML）：

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

啊当然！我知道这与报价有关，因为我尝试了“Line 1
Line 2”，它工作正常。我其实最初忘了提到这一点。谢谢！ – 2011-03-10 05:19:24

答

你与你的榜样（除此之外innerHTML并不总是支持主要的问题）是<和>可以轻松突破HTML如果不是esc模仿了。改为使用<和>。（别担心，它们会在JS看到之前解码。）您可以使用与引号相同的技巧（使用"而不是"来解决报价问题）。

我假设<代表左标签。你知道>代表什么吗？只是让我记得。或者它是一个错字，应该是&rt;？ – 2011-03-10 05:21:05

<实际上代表“小于”，>代表“大于”。 – cHao 2011-03-10 05:22:15

@Russel：<用于“小于”（''）。 @cHao：+1，我完全忘记了逃脱那些 – Cameron 2011-03-10 05:22:24

答

首先，不要把复杂的JavaScript代码放在href属性中。这很难阅读或维护。使用<script>标记或将JavaScript代码放在一个单独的文件中。

二，使用jQuery。 JavaScript是一种奇怪的野兽：其模式背后的原则并不是为了现代Web开发而设计的。 jQuery为您提供了大量的功能，而不会让您陷入JavaScript怪异的境地。第三，如果您的目标是要避免无休止地为所有（或许多）页面重复相同的基本结构，请考虑使用模板系统。模板系统允许您将特定内容插入到包含网站常用元素的脚手架中。如果听起来很复杂，那是因为我没有解释清楚。谷歌它，你会发现很多很好的资源。

依靠JavaScript进行导航意味着您的网站将不会被搜索引擎正确编入索引，并且对于JavaScript关闭的用户将完全无法使用。依靠JavaScript实现基本功能越来越普遍且可以接受。但是，您的网站至少应该为离散网页提供合理且持久的网址。

现在，所有的说，让我们来看看你的问题。这里有一种在jQuery中实现它的方法。这不是最紧凑，最紧密的实现，但我试图让一些非常可读的东西：

<!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>

好的，希望这有助于！如果jQuery看起来很有吸引力，可以考虑从this tutorial开始。

使用javascript更新div的内容

相关推荐