I've been building a list of links, all of which should change the content of a div to another specific content (about 4 lines of stuff: name, website, contact etc.) upon a click.

I found this code:

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

and used it in such a way:

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="">superlink</a>')">Pomorskie</a>
</li>

And it doesn't work as I expected.

It changes hyperlinks text from 'Pomorskie' to 'superlink'.

The plain text works just fine but I need links.

here's the / (only two of them show anything)

But after trying all of your recomendations, I think I'd jump to different divs with #links, cause nothing worked with this :/

Thanks a lot for trying, and cheers :)

I've been building a list of links, all of which should change the content of a div to another specific content (about 4 lines of stuff: name, website, contact etc.) upon a click.

I found this code:

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

and used it in such a way:

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

And it doesn't work as I expected.

It changes hyperlinks text from 'Pomorskie' to 'superlink'.

The plain text works just fine but I need links.

here's the http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/ (only two of them show anything)

But after trying all of your recomendations, I think I'd jump to different divs with #links, cause nothing worked with this :/

Thanks a lot for trying, and cheers :)

• javascript
• jquery
• html-lists
• anchor

• can you add the code for the wojewodztwo object? – Patrick Gunderson Commented Dec 20, 2012 at 0:44
• 1 Can you show an example of a before and after for how you would like the links to appear? – PhearOfRayne Commented Dec 20, 2012 at 0:44
• @PatrickGunderson wojewodztwo is just a div which is going to be replaced: '<div id="wojewodztwo"></div>' – John Alabama Commented Dec 20, 2012 at 0:47
• Your HTML is invalid, it would need to be <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=&qout;http://address.com&qout;>superlink</a>')"> (notice the escaped quotes) – Bergi Commented Dec 20, 2012 at 0:50
• 1 @Bergi " isn't escaped, it's an entity reference. \" is escaped, and %22 is url encoded. – ocodo Commented Dec 20, 2012 at 2:01

3 Answers 3

Just as a completely sideways look at this, I'd suggest avoiding the nesting weirdness / complexity, and reducing the problem down.

Setup the content in a hidden (ie. <div id="replacements">...</div>) Grab the innerHTML from the node you want, and be done with it.

Much easier to get replacement content from non-devs that way too, kinda works great if you're in a team.

// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

Control it with: (lose that href=javascript: and use onClick, better as an event handler, but for brevity I'll inline it as an onClick attribute here, and use a button.)

<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>

We have our target somewhere in the document.

<div id="target">My content will be replaced</div>

Then the replacement content sits hidden inside a replacements div.

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>

Here it is in JSBin

Improve the dynamic nature of this by using Handlebars or another nice JS templating library, but that's an exercise for the OP.

edit: Note, you should also name functions with a leading lowercase letter, and reserve the leading uppercase style for Class names e.g. var mySweetInstance = new MySpecialObject();

The quotes are mismatched! So when you click you are getting a JavaScript error.

The browser sees this string:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<

as:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="

Chnage the " inside to @quot;

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=@quot;http://address.com@quot;>superlink</a>')">Pomorskie</a>
</li>

Example fiddle.

Also note, using the href tag for JavaScript is a BAD practice.

You've got a problem with nested quotes. Take a look in your DOM inspector to see what the HTML parser built from it! (in this demo, for example)

You either need to HTML-escape the quotes inside the attribute as " or ", or convert them to apostrophes and escape them inside the JS string with backslashes:

<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…

See working demos here and here.

Better, you should use a onclick attribute instead of a javascript-pseudo-url:

<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>

or even a javascript-registered event handler:

<li class="pl11">
    <a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
    function replaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
    document.getElementBId("superlink").onclick = function(event) {
        replaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>');
        event.prevenDefault();
    };
</script>

(demo)