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.

Answer 1

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', '<img src=\'2.jpg\'>')

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>