Replace div content with other content

Question

I created a list of links, each of which should change the contents of the div to other specific content (about 4 lines of material: name, site, contact, etc.) by clicking.

I found this code:

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

and used it like this:

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

And it does not work as I expected.

It changes the text of hyperlinks from "Pomeranian" to "superlink".

Plain text works fine, but I need links.

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

But after you have tried all your recommendations, I think I would jump into different C # links divs, because nothing happened with this: /

Thanks so much for trying and welcome :)

Answer 1

In the same way as looking completely at it sideways, I suggest avoiding the oddities / complexity of breeding and reducing the problem.

Setting content in hidden (i.e. <div id="replacements">...</div> ). Take innerHTML from the node you want and do with it.

It's a lot easier to get replacement content from non-devs too, it seems to work great if you're on 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 href=javascript: and use onClick, better as an event handler , but for brevity I will include it as an onClick attribute and use a button.)

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

We have our goal somewhere in the document.

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

Substitution content is then hidden inside the div div.

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

Here he is in jsbin

Improve the dynamic nature of this using Handlebars or another beautiful JS template library, but this is an exercise for the OP.

edit: Note that you must also name functions with a leading lowercase letter and reserve a leading uppercase style for class names, for example. var mySweetInstance = new MySpecialObject();

Answer 2

Quotation marks are incompatible! So when you click, you get a JavaScript error.

The browser sees this line:

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

as:

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

Change the "inside" to @quot;

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

Fiddle example.

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

Answer 3

You have a problem with nested quotes. Look in your DOM inspector to find out what the HTML parser has developed from it! (in this demo , for example)

You need either HTML escape quotes inside the attribute like " or " , or convert them to apostrophes and escape them inside a 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>')">… 

Watch working demos here and here .

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

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

or even a javascript-logged 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 )