replace content of div with another content

Question

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

Answer 1

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();

Answer 2

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.