Updating the content of a div with javascript

Question

Rather than trying to create tons of different pages on my website, I'm trying to update the content of a single div when different items in the navbar are click to update the maint div content. I tried to find a simple example using 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>

This works just fine when I only try and update text, but when I put an img tag in there, as you can see, it stops working.

Either 1) what is the problem with how I am trying to do it? or 2) What is a better/easier way to do it?

I'm not stuck on Javascript. jQuery would work too, as long as it is just as simple or easy. I want to create a function that will just let me pass in whatever HTML I want to update and insert it into the div tag and take out the 'old' HTML.

score 6 · Accepted Answer · edited May 23 '17 at 11:46

You just have some escaping issues:

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

The inner ' need to be escaped, otherwise the JS engine will see ReplaceContentInContainer('example1div', '<img src=' plus some syntax errors resulting from the subsequent 2.jpg'>'). Change the call to (tip of the hat to cHao' answer concerning escaping the < and > in the HTML):

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

A simple way to do this with jQuery would be to add an ID to your link (say, "idOfA"), then use the html() function (this is more cross-platform than using innerHTML):

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

Ah of course! I knew it had something to do with the quotes because I tried "Line 1
Line 2" and it worked fine. I actually forgot to mention that originally. Thanks! — Russell Strauss, Mar 10 '11 at 05:19

score 2 · Answer 2 · answered Mar 10 '11 at 06:10

First of all, don't put complex JavaScript code in href attributes. It's hard to read or to maintain. Use the <script> tag or put your JavaScript code in a separate file altogether.

Second, use jQuery. JavaScript is a strange beast: the principles underlying its patterns were not designed with modern-day web development in mind. jQuery gives you lots of power without miring you in JavaScript's oddities.

Third, if your goal is to avoid having to endlessly duplicate the same basic structure for all (or many) of your pages, consider using a templating system. Templating systems allow you to plug in specific content into scaffolds containing the common elements of your site. If it sounds complicated, it's because I haven't explained it well. Google it and you'll find lots of great resources.

Relying on JavaScript for navigation means your site won't be indexed properly by search engines and will be completely unusable to someone with JavaScript turned off. It is increasingly common--and acceptable--to rely on JavaScript for basic functionality. But your site should, at minimum, provide discrete pages with sensible and durable URLs.

Now, all that said, let's get to your question. Here's one way of implementing it in jQuery. It's not the snazziest, tightest implementation, but I tried to make something very readable:

<!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, hope this helps! If jQuery looks attractive, consider starting with this tutorial.

score 1 · Answer 3 · answered Mar 10 '11 at 05:17

1

Your main problem with your example (besides that innerHTML is not always supported) is that < and > can easily break HTML if they're not escaped. Use < and > instead. (Don't worry, they'll be decoded before the JS sees them.) You can use the same trick with quotes (use " instead of " to get around quote issues).

answered Mar 10 '11 at 05:17

cHao

84,970
20
145
172

I'm assuming < stands for left tag. Do you know what > stands for? Just so I can remember. Or is it a typo and supposed to be &rt;? – Russell Strauss Mar 10 '11 at 05:21
1

< actually stands for "less than" and > stands for "greater than". – cHao Mar 10 '11 at 05:22
@Russel: < is for "less than" (`<`), and > is for "greater than" (`>`). @cHao: +1, I completely forgot about escaping those – Cameron Mar 10 '11 at 05:22
@Cameron: So many people do. It's caused me some hard-to-find problems a couple of times, though, so now i'm pretty vigilant about it. :) – cHao Mar 10 '11 at 05:30

Updating the content of a div with javascript

3 Answers3

Linked