Hello and welcome to our community! Is this your first visit?
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
    Thanked 0 Times in 0 Posts

    Cannot insert a <a href=""> into a div using innerhtml


    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

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Thanked 635 Times in 630 Posts
    did you try with single quotes inside the double:
    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

    function change()
    or visibilty:hidden/visible if that works better, instead of creating a link with innerHTML

  3. #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Thanked 67 Times in 67 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)
    document.getElementById("text").innerHTML = 'lots of text<br><a href="linktonewpage">some text</a>';
    b) Wrap the URL in single quotes (as xelawho suggested)
    document.getElementById("text").innerHTML = "lots of text<br><a href='linktonewpage'>some text</a>";
    c) Escape the quotation marks with a backslash
    document.getElementById("text").innerHTML = "lots of text<br><a href=\"linktonewpage\">some text</a>";
    "Yeah science!"


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