使用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。

來源

2011-03-10 Russell Strauss

你只是有一些逃避的問題：

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>

來源

2011-03-10 05:16:57 Cameron

啊當然！我知道這與報價有關，因爲我嘗試了「Line 1
Line 2」，它工作正常。我其實最初忘了提到這一點。謝謝！ – 2011-03-10 05:19:24

你與你的榜樣（除此之外innerHTML並不總是支持主要的問題）是<和>可以輕鬆突破HTML如果不是esc模仿了。改爲使用<和>。（別擔心，它們會在JS看到之前解碼。）您可以使用與引號相同的技巧（使用"而不是"來解決報價問題）。

來源

2011-03-10 05:17:31 cHao

我假設<代表左標籤。你知道>代表什麼嗎？只是讓我記得。或者它是一個錯字，應該是&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開始。

來源

2011-03-10 06:10:11 Ori

使用javascript更新div的內容

回答

相關問題