Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,932
    Thanks
    56
    Thanked 552 Times in 549 Posts
    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

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •