Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-20-2012, 11:43 PM   PM User | #1
Jammerz858
New to the CF scene

 
Join Date: Oct 2011
Posts: 4
Thanks: 2
Thanked 0 Times in 0 Posts
Jammerz858 is an unknown quantity at this point
Cannot insert a <a href=""> into a div using innerhtml

Hello,

I am trying to use JavaScript to change the content of a div on my page...

By clicking on a button on the side, the text content of a div changes to describe the link and at the bottom of the text I want a link to a site to appear.. The text bit is fine but I cannot find a way of inserting an <a href> in there without unexpected syntax and illegal tag errors popping up!

I thought this would be simple, (It probably is and I am just being an arse)...
I have spent ages searching for solutions and tried everything I can think of but no luck :(

So, here is the code...

function change()
{
document.getElementById("text").innerHTML = "lots of text<br><a href="linktonewpage">some text</a>";

I did think that separating the link away from the text and putting it in a separate div might work but still no luck. I am pretty sure that it must be the quotation marks (or the =) surrounding the link but I don't know what I can do to sort that... A link needs to be surrounded by "" doesn't it???

Any help on this would be very appreciated as I am driving myself mad here!
I apologise if this is super simple and I just being a 'noob' I really have spent hours trying to sort it!

Many thanks
Jamie
Jammerz858 is offline   Reply With Quote
Old 01-20-2012, 11:55 PM   PM User | #2
xelawho
Senior Coder

 
xelawho's Avatar
 
Join Date: Nov 2010
Posts: 2,437
Thanks: 52
Thanked 454 Times in 452 Posts
xelawho will become famous soon enoughxelawho will become famous soon enough
did you try with single quotes inside the double:
Code:
document.getElementById("text").innerHTML = "lots of text<br><a href='linktonewpage'>some text</a>";
although the thing to do really I think would be to put it into a separate div with style="display:none" (or that in css) and then

Code:
function change()
{
document.getElementById("thedivwiththelinkinit").style.display="block"
}
or visibilty:hidden/visible if that works better, instead of creating a link with innerHTML
xelawho is offline   Reply With Quote
Old 01-21-2012, 02:45 AM   PM User | #3
djh101
Regular Coder

 
djh101's Avatar
 
Join Date: May 2009
Location: Santa Clarita
Posts: 603
Thanks: 48
Thanked 63 Times in 63 Posts
djh101 is an unknown quantity at this point
The quotation marks are ending your string. You can either:
a) Wrap the string in single quotes (you can place single quotes inside double quotes or vice versa and they will not end your string)
Code:
document.getElementById("text").innerHTML = 'lots of text<br><a href="linktonewpage">some text</a>';
b) Wrap the URL in single quotes (as xelawho suggested)
Code:
document.getElementById("text").innerHTML = "lots of text<br><a href='linktonewpage'>some text</a>";
c) Escape the quotation marks with a backslash
Code:
document.getElementById("text").innerHTML = "lots of text<br><a href=\"linktonewpage\">some text</a>";
__________________
"Yeah science!"
Online Science Tools
djh101 is offline   Reply With Quote
Reply

Bookmarks

Tags
<a href>, error, innerhtml, javascript

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:38 AM.


Advertisement
Log in to turn off these ads.